I have a select element defined as
<select v-model="mySelectValue">
<option v-for=...>...</option>
</select>
If used as is, mySelectValue is updated correctly when the user changes the select input.
Now I want to style the input. I tried Selectize.js:
$('select').selectize();
The select input is now using the new look and functionality but changing the value doesn't update mySelectValue. I thought that the original select input would get updated with Selectize.js so I tried Dropdown.js. Same thing.
Using jQuery I hooked a on change listener to the original select input:
$('#mySelect').change(function() {
console.log($(this).val());
});
Using either of those two libraries I see the change event triggered and the original select input updated.
Why isn't Vue updating mySelectValue?
You should add a value attribute to <option>
<select v-model="mySelectValue">
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3'>three</option>
</select>
Related
I'm experiencing a weird visual issue with <select> <option> elements. I have a function which runs every time a specific <option> is chosen from a <select> dropdown, this code then sets one of the options of a select element to be selected, this is happening via:
$('select[name="data[ApplicationPayday][EmpIndustry]"]').find('option[value=""]').attr('selected', true)
The select that gets a value selected is:
<select class="custom-select" id="EmpIndustry" name="data[ApplicationPayday][EmpIndustry]" aria-describedby="EmployerIndustryHelp" required>
<option value="" selected>Please Select</option>
<option value="10">Health</option>
<option value="22">Retail</option>
</select>
However, the text of the select is invisible, despite there being valid options in the menu.
Any idea why?
REPRODUCTION URL: https://codepen.io/sts-ryan-holton/pen/LKJbzL
Use below code.
$('select[name="data[ApplicationPayday][EmpIndustry]"]').find('option[value=""]').prop('selected', true);
Looks like the issue is with:
$('select[name="data[ApplicationPayday][EmpIndustry]"]').val(25)
When you are moving between industries you are resetting the selected value to '25'. but the value of your 'Please Select' is "" (empty string). In your fiddle I changed that line to:
$('select[name="data[ApplicationPayday][EmpIndustry]"]').val("")
And now when I switch it is correctly displaying Please Select.
You can use anyone of below code
$('select[name="data[ApplicationPayday][EmpIndustry]"]').find('option[value=""]').prop('selected', true);
$('select[name="data[ApplicationPayday][EmpIndustry]"] option[value=""]').prop('selected', true);
$('select[name="data[ApplicationPayday][EmpIndustry]"]').val('');
Since select option has id and id attribute specifies a unique id for an HTML element, above code can be written like....
$('#EmpIndustry').find('option[value=""]').prop('selected', true);
$('#EmpIndustry option[value=""]').prop('selected', true);
$('#EmpIndustry').val(''); (code is same as ravibagul91 )
Given the following jQuery plugin: http://selectric.js.org/index.html which replaces the functionality of that of a regular select box by using custom UL LI lists,
Based on the plugins documentation, I know that you can programmatically select an option value if you already know the index to select by using the following code:
$('#idofselectbox').prop('selectedIndex', 3).selectric('refresh');
But they do not include a sample to be able to find and select an option value by a value.
For example,
Let's say i'd like to select the option value named 'apples' without actually knowing its index in the select box. Is this even remotely possible?
<select id="idofselectbox">
<option value="oranges">oranges</option>
<option value="pears">pears</option>
<option value="apples">apples</option>
<option value="strawberries">strawberries</option>
</select>
You can set the value as if it's a regular combo box, then call refresh on selectic to refresh the UI.
$('#idofselectbox').val('apples').selectric('refresh');
How would you go about having tags already being preselected in their selectbox at the time the page loads? Here's my code so far:
HTML:
<select class="selectBox operatingSystems" multiple="multiple">
<option>Windows</option>
<option>OSX</option>
<option>Linux</option>
</select>
JS:
$(".operatingSystems").select2({tags: true, tokenSeparators: [',', ' ']});
I'm basically trying to get it to look something like it does on the select2 documentation page where they have "orange" and "purple" preselected. From: https://select2.github.io/examples.html#data-ajax
You can select an existing option by setting the selected property.
<select class="selectBox operatingSystems" multiple="multiple">
<option>Windows</option>
<option selected="selected">OSX</option>
<option>Linux</option>
</select>
Would pre-select the OSX option in the select box. This isn't specific to Select2, it's how you set a pre-selected option in general for select boxes (both single and multiple select).
You can do this using vanilla JavaScript by setting the selected property on the element.
theOption.selected = true;
Or using jQuery's .val method for setting the value.
$("select").val(["OSX"])
In order for Select2 and other plugins to pick up the change in value, you may need to trigger the change event.
$("select").trigger("change")
html code:
<select>
<br>
<option>1</option><br>
<option>2</option><br>
</select>
This select will default display the first option item(display 1).
Now i want to change select to display the second item by jquery when dom is ready, but i tried several times, all failed.The following is my attempt:
$('select').prop('selectIndex', 1);
$('option').eq(1).attr('selected', 'selected');
$('option').eq(1).prop('selected', true);
default set select's style to 'display:none' in html code, then try above three ways and finally invoke $('select').show()
Maybe, i am only setting the dom value, not tell browser to refresh 'select'.
Do you konw the other way to refresh default display option in select?
You have to add values to your options from select.
<select>
<option value="1">First</option>
<option value="2">Second</option>
</select>
Then, just set the value "2".
$("select").val("2");
Or, you can do this simply setting the second value from select.
$("select").val(2);
See the working example here.
This is enough
$("select").val(2);
i think you want to select option 2 when page is load.
<select>
<option>1</option>
<option selected="selected">2</option>
</select>
http://jsfiddle.net/E2AMX/ has the exact demonstration of the problem, which is:
I have multiple select boxes on the same page. All the options of the selectboxes are in the given form:
<option value="#id_num">StringVal</option>
and i have one observableArray (say idlist) of id_nums with no separation regarding selectboxes. For example,
idlist = ko.observableArray([1,2,3,4]);
and the selectboxes are as
<select name="first" data-bind="selectedOptions: idlist">
...
<option value="2">Blah</option>
<option value="3">Blah</option>
...
</select>
<select name="second" data-bind="selectedOptions: idlist">
...
<option value="1">Blah</option>
...
</select>
<select name="third" data-bind="selectedOptions: idlist">
...
<option value="4">Blah</option>
...
</select>
My problem is: when i select one option from a selectbox, other selectboxes return to their initial states. This is directly related to selectedOptions, for if i remove the selectedOptions directive, this problem does not occur.
Any suggestions will be very welcomed.
Thanks.
The selectedOptions binding is meant to be used on a single <select> tag with multi-select enabled. It will keep an array of each item in the options box selected.
The reason you are seeing the behavior you are is because when you you select a single value from one of the drop downs, the selectedOptions binding immediately fires. The logic goes something like this:
Update on target <select> fires.
Binding extracts the value from <option> and updates the underlying observable array.
Observable array fires update since values have changed.
Secondary drop downs respond to update, and update their selected value based on what is in the array.
Since no value exists in the set of <option> tags, the value is cleared.
This is why you are seeing this behavior. If you want to collect a composite from all selected options, then you will either need to write a new custom binding, or create a seperate array for each <select> you want to bind to.