This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Selecting an option by its text
Is there any way how to choose the option in selectbox by the text label of the option (not the value)?
<select id="form-mySelect" name="number">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
$("#form-mySelect").val("One");
The example above doesn't work in jQuery 1.4.3. I've read somewhere, that in some lower version of jQuery selecting option by >text label< (not by the value) works.
Is there any way, how to simulate this behavior and make it functional in jQuery 1.4.3?
You can use $('#form-mySelect").html() to get the label contents. So you could loop all options and compare the html() value with one given and then select the option.
Related
This question already has answers here:
How can i get the unselected items from dropdown using jQuery? [closed]
(1 answer)
Get list of values from dropdown that are NOT selected using jquery
(2 answers)
How to get currently unselected option value when un selecting from multi list box
(2 answers)
get unselected list using jquery multi select box
(2 answers)
Closed 3 years ago.
By default, I have all the dropdown items selected. But when a user unselects one of them, I want to get the value of that unselected option.
I have tried the following option:
This is my html code:
<select class="ss-select" data-dropup-auto="false" id="ss_options" multiple="multiple" name="ss">
<option selected="selected" value="1">One</option>
<option selected="selected" value="2">Two</option>
<option selected="selected" value="3">Three</option>
<option selected="selected" value="4">Four</option>
<option selected="selected" value="5">Five</option>
</select>
This is the jquery code I tried:
$("#ss_options").change(function(){
alert($(this).val());
});
With this code, when I unselect an option (example: one), I get the values as [2, 3, 4, 5]. I am aware that I can do array subtraction to get the desired value, but is there some better of doing it?
Use :not and :selected:
alert($("#ss_options option:not(:selected)").val());
This question already has answers here:
Get selected text from a drop-down list (select box) using jQuery
(35 answers)
Closed 8 years ago.
I have a select code with two option. Is there a way I can use jQuery to alert me the text within the option tag of the option I have selected? Currently I have option two selected so when I use the code below it comes back as "5". I need it to come back as "Option 2".
alert (jQuery('#bw_status').val());
The code below is the example code I am using.
<select id="bw_status">
<option value="7">Option 1</option>
<option value="5">Option 2</option>
</select>
Yes, try this:
jQuery('#bw_status option:selected').text()
This question already has answers here:
Adding options to a <select> using jQuery?
(31 answers)
Closed 8 years ago.
I am trying js:
$('a[data-select="more-options"]').click(
function () {
$('select')
.append($("<option></option>")
.attr("one more additional and long option",3)
.text("3333333333"));
}
);
on HTML of
<span id="dropdown">A
<select>
<option>this is option 1</option>
<option>This is option 2</option>
</select> list<br>
</span>
<a data-select="more-options" href="#">Add long option to the select</a>
but I get no results (or error).
Check this fiddle.
$('select').append( "<option>This is option 3</option>" );
This appends the third option to select. You can add other attributes to the option.
Check this,
$('a[data-select="more-options"]').click(function () {
$('select').append("<option>3333333333</option>");
});
jsfiddle
This question already has answers here:
How can I set the value of a DropDownList using jQuery?
(17 answers)
Closed 8 years ago.
Hi I know this was asked many times, I'm looking for a simple solution.
<select onchange="this.options[this.selectedIndex].value">
<option>--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
When a user select an option let's say One the select box would display the numerical 1.
Thanks in advance
Why don't you just use a numeral for the display option on each?
e.g. <option value="1">1</option>
(and take the inline javascript out entirely).
example: http://jsfiddle.net/79xvY/
This will set the actual innerHTML value of the select box, if that is what your goal is
<select onchange="this.options[this.selectedIndex].innerHTML=this.value">
<option>--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
This question already has answers here:
How do I make a placeholder for a 'select' box?
(41 answers)
Closed 9 years ago.
<select name="name">
<option>Select an option.</option><br/>
<option>A</option><br/>
<option>B</option><br/>
<option>C</option><br/>
</select>
HTML5 has required="required", and this is the kind of effect I want with the dropdown above. I don't want the user to select "Select an option", only "A", "B", or "C". I know I could set a default value of A and just remove the "Select an option" option entirely, but I don't want users to click haphazardly without reading the options available.
Can this be done with HTML and/or JS?
edit: this code is only to force users to choose a valid option, instead of the one by default... validation for submit/change/etc should be added
You should just disable the first option and setting it as selected by default:
<select name="name">
<option disabled="disabled" selected="selected">Select an option.</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
That should do the trick, demo here http://jsfiddle.net/pixshatterer/Q27HX/
If you use the Validation plugin (here: http://jqueryvalidation.org/) and update your <select> to supply value on each <option>, it will prevent form submission if the "empty" value is selected:
<select name="name" required>
<option value="">Select an option...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
It's also worth noting that the only valid child elements of a <select> is either <optgroup> or <option>, so remove those <br />s.
If jQuery is not an option, you could always add an onclick to the select or an onsubmit to the form and do a quick check on an empty string (or whatever you set the default value to).
Just give display:none to the element option and disabled=disabled. Thanks to #pixshatterer
http://jsfiddle.net/Xh9nh/4/
EDIT : Put visibility:hidden by mistake.