I am trying to set the value dynamically to my combobox on which I have applied select2 jQuery class. After applying code it sets the value to that combobox; but it still says "Select one".
Can anyone help me to show the selected value? Please.
HTML:
<select id="cmboDemo">
<option value="">Select one</option>
<option value="Bob">Bob</option>
<option value="Scott">Scott</option>
</select>
Javascript:
$("#cmboDemo").select2();
//....
$("#cmboDemo").val("Scott");
...//
In result scott is selected but combobox shows "Select one".
Remove $("#cmboDemo").select2();
and use the second one only:
$("#cmboDemo").val("Scott");
By using select2.js some additional layers of css are overlapped actual combo-box. By using all above code the value is set to select box; but because of that upper style layer it shows first value. i.e Select one.
So by changing that upper layer's text will fixed the problem.
This is the final outcome:
$("#select2-cmboDemo-container").text("Scott");
Thanks.
Related
I want to set the first position to select2 dropdown by default, I have tried this but It doens´t work:
$('#mylist').val($('#mylist option:first-child').val()).trigger('change');
Other way that I tried;
$('#mylist').val(1);
But the problem is I don´t know what value is, because it is depend from a query and It will not always be the same value.
I did not set the dropdown values from the HTML, but it is an input hidden and the values are loaded in a query
I hope that anyone can help me
Regards!
If you using Select2 4.x just trigger change.select2
$('#mylist').val(1).trigger('change.select2');
please try with this:
$('#yourSelect2').val($('#yourSelect2 option:eq(1)').val()).trigger('change');
the value from eq() depends of the position that you want to select
This works for me:
$('#mylist option:eq(0)').prop('selected',true);
Please do this
$('select#mylist').val(1).select2();
It's better to use attribute specifiers and set that element's selected prop to true like so:
$('option[value="op2"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
<option value="op4">Option 4</option>
</select>
Then change op2 to whatever the value attribute of the desired default option is.
this work for me :
$("#mylist").val($("#mylist option:first").val()).trigger('change');
juste remove -child
As you may know Select2 need data in particular format only [id="id_value",text="data_linked_to_id"]
Lets consider you want to select first item ,you should have its Id which is used by select2 to list all items.(let here first id be 1)
$('#selectElementId').val("1");
$('#selectElementId').trigger('change');
If want to set multiple items selected then pass array of ids.
ids=["1","3","4"]
$("#selectElementId").val(ids);
$("#selectElementId").trigger('change');
**OR**
$("#selectElementId").val(["1","3","4"]);
$("#selectElementId").trigger('change');
Step 1:
Select first option of your select(s) - works not only for select2
$('#myForm').find('select').find('option:eq(0)').attr('selected','selected');
Step 2:
Trigger select2 change
$('#myForm select').trigger('change.select2');
I am using chosen.jquery.js for select field
<select chosen multiple data-placeholder="Select Body Part(s)"
ng-options="option.Name as option.Name for option in BodyPartList" ng-model="Body_Part">
<option value="" disabled>Select Body Part(s)</option>
</select>
But It shows only data-placeholder value in case of no data in model.
I want to show "Select Body Part(s)" as a option in list.
And user must not select this. Reason is that, I want to add dynamic "Unknown" value in list of Body_Parts. But it not reflect in list.
Same work for select having single selection.
I'm not seeing any problems with your code, as such. Like, I'm trying it and getting the visual behaviour I think you're wanting? Am I missing something?
Html just yours with ng-app etc, javascript is:
var myApp = angular.module('myApp', ['localytics.directives']);
myApp.controller('MyController', function($scope) {
$scope.BodyPartList = [
{ Name: "Arm" },
{ Name: "Leg" }
];
$scope.Body_Part = [];
});
Not sure if data-placeholder is actually doing anything.
Fiddle: http://jsfiddle.net/7187f6d9/
That said, it's not "working". In the fiddle I put a regular select box alongside the chosen one, and the chosen one doesn't seem to be writing to the ng-model correctly. I'm not sure what's up with that.
You can choose the below option
https://harvesthq.github.io/chosen/#optgroup-support
or push another item to the top of the array from server side as your custom label and disable it on client side with the help of ng-if and $index properties of ng-repeat and angularjs. If this make sense then its fine else i can give you a demo.
I hope your query is, you want show a place holder as current selected value but user shouldn't be able to select it.
Instead of making it disabled, make ithidden. Then display an error if a user doesn't select any other options, using the value of placeholder option.
A sample snippet is added below. If value of select is Error, write a case to throw a error back to user.
<select>
<option value="Error" hidden>Select any Company</option>
<option value="Toyota">Toyota</option>
<option value="Nissan">Nissan</option>
<option value="BMW">BMW</option>
</select>
Hope this helps! If not, ping me with your query. :)
I'm facing an issue in selecting the dropdown first value after selecting it for the first time. When the dropdown options slidedown to select, the first value would be selected by default,bcoz of which I'm not able to select the first value. I'm using JQuery mobile framework and I'm writing custom JS to change the dropdown. I need to handle this dropdown only using custom JS and cannot make the dropdown work with this custom logic due to some other issue with my project.
Here first value im referring as 'US' from dropdown
The solution for this issue would be really appreciated. Thanks in advance.
HTML:
<select id="drpDwn">
<option value="" disabled="disabled">select</option>
<option value="US">US</option>
<option value="AU">AU</option>
<option value="NZ">NZ</option>
</select>
JS:
$(document).on('change', '#drpDwn', function () {
var index = $(this)[0].selectedIndex;
$(this).attr('selectedIndex', index);
$(this).find('option').removeAttr('selected');
$(this).find('option').eq(index).attr('selected', 'selected');
$(this).siblings('span').html($(this).find('option').eq(index).text());
});
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css
Check out this JSFiddle
The difference maker was modifying:
$(this).find('option').removeAttr('selected');
Into:
$(this).find('option:not(:selected)').removeAttr('selected');
When 'change' was triggered, the selected attribute is added to the new option, so you were stripping it away from everything even the new selection. That's why the option never changed.
Using :not(:selected) came in handy then since it will only strip away the attribute from things that weren't the current selected option.
I'm banging my head against the wall on this one.
I have an array of objects that will be used to populate a select drop down:
CardCount = [{"ClientId": "0010", "Description": "0010 (206 Members)"}, {"ClientId": "0051", "Description": "0051 (1 Member)"}, ........]
When I attempt to use ng-options, the value of the option is set to the index, not to the ClientId as desired. To get the value in each option to be the ClientId, I have to use a ng-repeat in the options. Here is my html:
<select ng-model="CurrentClient">
<option ng-repeat="item in CardCount" value="{{item.ClientId}}">{{item.Description}}</option>
</select>
Initially, all is well, the select and options are generated correctly, and the first option is correct. Now, when a certain button is clicked somewhere else on the page, it becomes necessary to recreate this select and options with a smaller array of similar objects. However, doing so creates a blank option with a value of "? string:0010 ?". This is the option that is selected. Again, I cannot use ng-options to correct this problem because doing so doesn't set the value attribute in the option tags correctly. So, I added this to the option tag:
<option ng-repeat="item in CardCount" value="{{item.ClientId}}" ng-selected="CurrentClient == item.ClientId">{{item.Description}}</option>
Now, that does mark the correct option as selected. However, the drop down still shows the blank option. Here's the rendered html:
<select ng-model="CurrentClient">
<option value="? string:0010 ?"></option>
<option value="0010" selected="selected">0010 (206 Members)</option>
</select>
As you can see, it sets the correct option to selected. However, it sets it to selected="selected", and not just selected. When I inspect element and change selected="selected" to selected (remove the equals and everything after it), the drop down then correctly displays the correctly selected option.
Again, initially the select and options work great. The problem seems to happen only after the array that the select is created with is changed. How can I get this select and options working correctly after I change the array, and not show that first blank option?
Thanks!
Changed you option element to set value by default.
<option ng-repeat="item in CardCount track by item.ClientId"
value="{{item.ClientId}}">{{item.Description}}</option>
Hope this could help you. Thanks.
ng-options is definitely the way to go:
<select ng-model="selected.ClientId" ng-options="it.ClientId as it.Description for it in clientList">
<option value="">-</option>
</select>
I have the following html code
<div id="BrokersList4ServiceEndWrapper">
<select id="BrokersList4ServiceEnd">
<option value="1">s1</option>
<option value="2">s2</option>
</select>
</div>
I tried to
set the selected value to 1.
get the value of the second option.
get the selected value
in jquery but didnt get it right and please adive if there is any method to know the selection syntax easily
set the selected value to 1.
$('#BrokersList4ServiceEnd').val(1);
get the value of the second option.
$('#BrokersList4ServiceEnd option:eq(1)').val()
get the selected value
$('#BrokersList4ServiceEnd').val()
DEMO