I'm using the Bootstrap Multiselect jquery plugin.
My problem is, if the user selects all options, I want it to actually display all the selections like this
Cheese, Tomatoes, Mozzarella, Mushrooms, Pepperoni, Onions
Instead, once I select the 6th option, it displays this
All Selected (6)
Here's my code
<select id="example-numberDisplayed" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
and
$(document).ready(function() {
$('#example-numberDisplayed').multiselect({
numberDisplayed: 6
});
});
Any help would be appreciated. Thanks in advance
For achieving this you should modify the code in java script file of multi select ie bootstrap-multiselect.js, i do not know it is permitted or not as it is licensed.
But if you comment or remove the following code in buttonText function, it will not display all selected in any situation.
else if (this.allSelectedText
&& options.length === $('option', $(select)).length
&& $('option', $(select)).length !== 1
&& this.multiple) {
if (this.selectAllNumber) {
return this.allSelectedText + ' (' + options.length + ')';
}
else {
return this.allSelectedText;
}
}
Related
For the following html,
<select class="cell dropdown" data-test="Visibility-warn">
<option value="">Select...</option>
<!---->
<option value="0"><!---->Good<!----></option>
<!---->
<option value="1"><!---->Moderate/Good<!----></option>
<!---->
<option value="2"><!---->Moderate<!----></option>
<!---->
<option value="3" selected=""><!---->Moderate/Poor<!----></option>
<!---->
<option value="4"><!---->Poor<!----></option>
<!---->
</select>
I have written the cypress code to select by value and not by text. As per docs, both select by text and select by value can be done in the same way.
cy.get('[data-test="Visibility-warn"]')
.should('be.enabled')
.select('3')
which works fine.
But on the other hand, I am trying to create a custom command that does not work.
cy.selectAndVerify('[data-test="Visibility-warn"]', weatherLimits.Visibility.warn, 'Moderate/Poor');
//weatherLimits.Visibility.warn = gives the value 3
And in Commands:
Cypress.Commands.add('selectAndVerify', (selector, textToSelect, valueToVerify) => {
cy.log(textToSelect)
cy.get(selector)
.should('be.enabled')
.select(textToSelect)
//.should('have.text', valueToVerify);
})
How can I possibly make the custom command work?
What I think is happening is weatherLimits.Visibility.warn is passing a number that is 3 but cypress is expecting an string. so it should be .select(textToSelect + "")
Cypress.Commands.add(
"selectAndVerify",
(selector, textToSelect, valueToVerify) => {
cy.log(textToSelect)
cy.get(selector)
.should("be.enabled")
.select(textToSelect + "")
.should("have.text", valueToVerify)
}
)
Though #Alapan Das answer is already accepted, adding an answer that rightly does the "verify" part.
Cypress.Commands.add('selectAndVerify', (selector, textToSelect, valueToVerify) => {
cy.get(selector)
.should('be.enabled')
.select(textToSelect + "")
cy.get(selector).find('option:selected').should('have.text', valueToVerify)
})
and in test
cy.selectAndVerify('[data-test="Visibility-warn"]', weatherLimits.Visibility.warn, 'Moderate/Poor');
I'm trying to use interpolation in a template select options like normal
<select class="form-control" id="staff" name="staff">
<option selected disabled>- Select -</option>
#foreach($staff as $aStaff)
<option value="{{$aStaff->id}}">{{$aStaff->initials}}</option>
#endforeach
</select>
The compile error is clear
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
But i'm still unsure of correct usage. Vue documentation simply gives example
<select v-model="selected">
<!-- inline object literal -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
However i'm unsure how to translate this into using the foreach I need above
Something like this is invalid
<option :value="$aStaff->id">{{$aStaff->initials}}</option>
So just not sure how to interpret ?
Edit: tried using v-for, i get no errors but nothing in the select options
<select class="form-control" id="staff" name="staff">
<option selected disabled>- Select -</option>
<div v-for="aStaff in staff">
<option :value="aStaff.id">aStaff.initials</option>
</div>
</select>
I have staff defined in custom component:
<sale v-if="showModal" #sale="calcFees" :staff="{{$staff}}"></sale>
So when i simply do {{staff}} in the component page, it shows the data i expect to see.
Sale.vue component definition:
<script>
export default {
data: function () {
return {
price: null
}
},
props: {
staff: {
type: Array,
required: true
}
},
methods: {
onSale(){
this.$emit('sale', this.price)
}
}
}
</script>
The code is iterating over a div. Instead, iterate the option.
<option v-for="aStaff in staff" :value="aStaff.id">{{aStaff.initials}}</option>
And remove the div of course.
Now I'm working with Laravel 5.
I got value from select option like below:
select name="billing_provider" onChange="changeLanguage(this.value)"> #foreach($tests as $test)
option value="{{ $test->tax_id }},{{ $test->npi }}" name="billing_provider">
{{ $test->test_name }} </option>#endforeach </select>
Here I need to explode the option value and store it into another text field value.
How can I do that?
First, you have made a mistake building your HTML.
<select> has an attribute name which is going to be the key in the global arrays $_GET or $_POST.
However <option> doesn't have attribute name. You should remove that.
If you want to separate the value of billing_provider in your backend (php /w Laravel), do so.
In your method which handles the submission of the form:
$input = Input::get('billing_provider');
$billing_provider = explode(',', $input);
//Now $billing_provider[0] === $test->tax_id
//And $billing_provider[1] === $test->npi
Or if you want to perform this action before form submission and you're using jQuery, then you can do this:
https://jsfiddle.net/17fkpqbe/
JavaScript (/w jQuery):
$(document).ready(function() {
$('select').change(function() {
$('.inputs').html('');
var $explodedVal = $(this).val().split(',');
for(i = 0; i < $explodedVal.length; i++) {
$('.inputs').append('<input value="' + $explodedVal[i]+'">');
}
});
});
HTML:
<select>
<option></option>
<option value="123,555">Some Name 1</option>
<option value="123,444">Some Name 2</option>
<option value="123,333,555">Some Name 3</option>
</select>
<div class="inputs"></div>
I have a drop down menu with a few options and I want to enable the selected portion and disable the other portions once I select a value from dropdown using PHP.
Are you looking for something like this?
var ddl = $('#test');
ddl.on('change', function()
{
if (ddl.find('selected').val() != '')
{
ddl.prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id='test'>
<option value=''>select</option>
<option value=''>a</option>
<option value=''>b</option>
<option value=''>c</option>
</select>
It is not possible to achieve what you want from PHP. PHP is a server side language. What you want is client side interaction.The code snippet by #Vimalan is appropriate.
I have a dropdownlist in my page and the html part lists below:
<select id="Permission_id" name="Permission_id"><option value="">Pls select</option>
<option value="001f492b-fbb2-440c-b2ac-1fab5d97f5e3">super</option>
<option value="559ede95-1dbb-45d5-ae41-2df6f460e87a">admin</option>
<option value="80b330ee-37dc-42c4-8902-c30254112c11">user</option>
<select>
And in the same page, I have another dropdownlist , the html part lists below:
<select id="TopPranet_id" name="TopPranet_id"><option value="">Pls select</option>
<option value="65c61442-e02f-4071-b746-2c7cbfcc859a">Settings--admin</option>
<option value="66d21c35-66a2-40d8-a9db-675b337fa0bb">Control--admin</option>
<option value="cd612bfc-9f61-4228-b986-90bda4be9d8d">Action--admin</option>
<option value="2a137846-5ae0-4104-b0c9-be09a0e772d8">Settings--super</option>
<option value="b75c43f3-cafb-41a2-a76b-c572fffd8a6a">Control--super</option>
<option value="2c3f618c-373f-4559-967f-d8dcea1b6996">Action--super</option>
</select>
Now I want to do things like below:
When Permission_id's select item changes, then TopPranet_id's item will only contains the items that have Permission_id's selected text inside. that is, if I select admin in Permission_id control, then TopPranet_id control will only contains Settings--admin,Control--admin,Action--admin item, others are removed.
I know I can use Jquery to do this, but I am a newer to this, also, regex maybe also required for doing this.
Need your help, thx.
Please check here i have added one ex
Here
You html all seems ok
Now
in javascript
$('#Permission_id').change(function()
{
$('#TopPranet_id option').each(function()
{
if(this.innerHTML.indexOf($('#Permission_id :selected').text())!=-1)
{}
else
{
this.style.display='none';
}
});
});
We have added change function which will detect the change event of the first dropdown and after this we will check that text with second dropdown which will show and hide the dropdowns