I have the following multiple drop-down lists defined using select2 but the placeholders don't work?
<select class="js-select2" multiple="multiple" placeholder="Select State">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
<select class="js-select2" multiple="multiple" placeholder="Select Fruits">
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
</select>
<script>
$(".js-select2").select2({
// placeholder: 'Select an option...'
});
</script>
It only works if I define the placeholder inside the select2 option list (commented out above) but I want to use a single class to initialize all select2 multiselects drop-downs and display different placeholders.
Is it possible to achieve this?
For a quick workaround, you can pass the value of the attribute to the placeholder option:
$(".js-select2").each(function() {
$(this).select2({
placeholder: $(this).attr('placeholder')
});
});
This does not work when using $(".js-select2").select2() directly, I assume in that context this doesn’t point to the right object (or something like that). But if you use an each loop to initialize it on each element separately, it works.
https://jsfiddle.net/84whaced/
Alternatively, it should work if you use data-placeholder in the HTML (amazing what we can find out once we check the documentation, right?), see https://select2.github.io/options.html#data-attributes - https://jsfiddle.net/84whaced/1/
This would be the preferred option, I think.
It will work as:
If we just set the attr e.g. $("#state").attr('data-placeholder', 'Select State'), there will no effect.
However, if we set the attr and then call $("#state").select2() with no arguments, then the placeholder updates.
$("#state").attr("data-placeholder","Select State");
$("#state").select2();
You can use the data-placeholder for different placeholder for every select
$('select').select2({
placeholder: function(){
$(this).data('placeholder');
}
});
<select class="js-select2" multiple="multiple" data-placeholder="Select State">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
<select class="js-select2" multiple="multiple" data-placeholder="Select Fruits">
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
</select>
You can check the Demo as well.
Maybe you have similar ids on your page. JS'll select latest id by default. Try to change them.
Related
I have an input with [disabled] depending upon the ngModel of another input. Initially [disabled] is working properly but not when we change the dependant input value, the [disabled] property is not working. How to apply two binding on [disabled] property?
Following is the code snippet.
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option value="0">Disabled</option>
<option value="0">Enabled</option>
</select>
This model isDisabled is changed correctly. I could see the value change like this in template {{isDisabled}}. But not reflected in the [disabled] property of the select box.
<select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>
The primary problem was you were using same value 0 for both option. But even if you change them to 1 & 0 respectively for Enable & Disable. It will not gonna work because value attribute stores values as '0'(string '0') & '1'(string 1) (in short stringify value of it).
You could easily solve this dataType issue of value by using ngValue attribute binding.
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option [ngValue]="1">Disabled</option>
<option [ngValue]="0">Enabled</option>
</select>
Plunker Demo
you need to add a name attribute to the input and make the ng-mode two-way binding by wrapping up with parenthesis also. no need to use the ngModelChange for this purpose
<select [(ngModel)]="isDisabled" name='isDisabled'>
<option value="0">Disabled</option>
<option value="1">Enabled</option>
</select>
<select [(ngModel)]="userInput" [disabled]="isDisabled == '0'" name='userInput'>
<option value="test">Test</option>
</select>
In your question, both option values are 0.
You'll want to ensure that one is true, with the other being false
Component:
component class {
myVar = false
}
Template:
<select [(ngModel)]="myVar">
<option value="true">...</option
<option value="false">...</option
</select>
<select [disabled]="myVar">
<option>...</option
</select>
Try to use true\false for [disabled] it will save your function comparator, and use 2-way binding directly.
Like:
<select [(ngModel)]="isDisabled">
<option value="true">Disabled</option>
<option value="false">Enabled</option>
</select>
<select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>
See Plunker
I have a select list like
<select id="list">
<option value="">Select something</option>
<option value="1">Uno</option>
<option value="2">Two</option>
<option value="3">Trois</option>
</select>
And with jQuery I want to select the second option, get the value and put it into a hidden input.
Im doing it this way:
$('#IdOfTheInput').val( $($('#list option')[1]).attr('value'); );
But I don't know if there is a better way to do it, since is a really common thing and it smells suboptimal.
Thanks!
If what you want is to select the option by index then you can use .eq() and use .val()
$('#IdOfTheInput').val($('#list option').eq(1).val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="list">
<option value="">Select something</option>
<option value="1">Uno</option>
<option value="2">Two</option>
<option value="3">Trois</option>
</select>
<input id="IdOfTheInput" />
you can use jQuery eq() selector.
$("inputSelector").val($("SelectSelector option:eq(1)").val());
Use the options and value to get the value.
var option = document.getElementById("list").options[1].value; // return 1"
I have a select element with six options, the first being a blank option:
<select name="method-rcvd" class="form-control" ng-model="workRequest.ReceiveMethod" required >
<option value="" ng-selected="true"></option>
<option value="1">Phone</option>
<option value="2">Email</option>
<option value="3">Fax</option>
<option value="4">Mail</option>
<option value="5">Other</option>
</select>
On the scope is the object property bound to this select:
$scope.workRequest.ReceiveMethod = "";
For some reason, the select ALWAYS defaults to "Phone", instead of blank. I want it to default to blank. When I remove the model binding it works, so I know it has something to do with that, but it needs to be bound. This seems to me that it should be relatively straightforward, but I am having a very difficult time getting this simple thing working.
When I spit out the value of ReceiveMethod below the select:
Receive Method: {{workRequest.ReceiveMethod}}
It always defaults to "1". How can I get this to default to the first option, the blank option?
Thanks.
Are you setting a default value in the controller?
What happens if you set default value to 0 instead of ''?
That should work but something must be setting another value on workRequest.ReceiveMethod
I got this working by using the ng-init directive, like so:
<select name="method-rcvd" class="form-control"
ng-model="workRequest.ReceiveMethod"
ng-init="workRequest.ReceiveMethod = ''" required >
<option value=""></option>
<option value="1">Phone</option>
<option value="2">Email</option>
<option value="3">Fax</option>
<option value="4">Mail</option>
<option value="5">Other</option>
</select>
You also don't need the
ng-selected="true"
in the first (blank) option.
I am trying to disable option items in a dijit/Form/FilteringSelect. Here is code
<select id="filtSelect" dojoType="dijit.form.FilteringSelect">
<option disabled="disabled">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Please help me.
You can do it this way: ( Vers. 1.9 )
<select data-dojo-type="dijit/form/" id="count" name="count">
<option disabled="disabled">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Here's the full fiddle for my Example above(Edited by Thomas Upton): http://jsfiddle.net/tupton/266C4/
and here the reference from dojo: http://dojotoolkit.org/reference-guide/1.9/dijit/form/FilteringSelect.html?highlight=filteringselect
In the 1.6 Vers it must look like:
<script>
dojo.require("dijit.form.FilteringSelect");
</script>
<body class="claro">
<select dojoType="dijit.form.FilteringSelect" id="fruit" name="fruit">
<option value="AP" disabled>
Apples
</option>
<option value="OR" selected>
Oranges
</option>
<option value="PE">
Pears
</option>
</select>
</body>
Here the fiddle for this Version: http://jsfiddle.net/Q4zw6/
It's important that you load the instance of dijit.form.filteringSelect to use it.
Regards, Miriam
I don't believe you can disable options with dijit/form/FilteringSelect because it is store-based and is supposed to let a user enter any text.
There is a property called displayedValue, which you can use to set whatever you want. However, with FilteringSelect, any text that isn't an option is marked as erroneous input, as seen by the following code and this jsfiddle.
<select data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="displayedValue: 'Select'" id="count" name="count">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
You could use a dijit/form/ComboBox in exactly the same manner; the difference between FilteringSelect and ComboBox is that the latter allows any input. See the documentation for more information.
The issue is that FilteringSelect relies on dojo data store, as others have pointed out. So if you don't create that manually, it will happen behind the scenes and you just won't know how to reference it. But on second thought, looking at the API I notice FilteringSelect has a property named store.
So, you either need to create the data store yourself & initialize the FilteringSelect with it (http://dojotoolkit.org/reference-guide/1.9/dijit/form/FilteringSelect.html) or retrieve it by using dijit's byId and then accessing the "store" property.
Then, manipulate that data store. Maybe store a temporary copy before you remove the option if you want to restore it after. If you look up data store I'm sure removing an option is trivial. Sometimes with widgets it happens that you need to trigger a re-rendering method also to have it update after (you can usually find some method in the widget's API for this, sometimes "reset"), though I believe with stores it may watch them more intelligently.
Take the below HTML select for an example:
<select name="selValues" id="selValues">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
If we write the following jQuery statement:
$('#selValues').val('2'); // Two will get selected
$('#selValues').val('3'); // 3 will get selected instead of 5??
Why is it like that?
Use
$("#selValues option[value='3']").attr('selected', 'selected');
Also a good article on
jQuery - Select elements - tips and tricks
The val() method gets or sets the selected text. You may want to use selectedIndex instead:
$('#selValues').get(0).selectedIndex=2;
When selecting options jQuery looks first at the value then at the text of an option. It also goes through options in order. So, $('#selValues').val('3') selects options 3 first, but right after that changes selection to option 4 (as it has the text "3"). Use a multiple select to see that in fact both options are selected
<select name="selValues" id="selValues" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
As of JQuery 1.4 this has now been made unambiguous. It will now select by value, not by text value http://jquery14.com/day-01#backwards
If you do need to still select by value then a suggested method is here