<select id="editSkillList">
<option id="0">Select</option>
<option id="8">text1</option>
<option id="5">text2</option>
<option id="4">text3</option>
</select><br><br>
Javascript code
document.getElementById("editSkillList").selectedIndex="2";
But i want set selected using option id.Is it posible? then please help me
You can just set the selects value to the text you get from the option after targeting the ID
document.getElementById("editSkillList").value = document.getElementById('4').innerText;
FIDDLE
EDIT:
If the options have a value, you just set the selects value to one of the options value
document.getElementById("editSkillList").value = document.getElementById('4').value;
You can do:
document.getElementById('5').selected = true;
Replace '5' with the id of the option you need to select.
you can select your option using below code.
Javascript
document.getElementById("editSkillList").value = document.getElementById('4').value;
or you can use this code also.
var editSkillList = document.getElementById("editSkillList");
editSkillList.options[editSkillList.selectedIndex].value;
i hope it will help you.
Related
I have a select and I want it's selected option to change but I can't make it happen for some reason. This is the code that I have.
$("#ID option[value=grpValue]").prop('selected', 'selected').change();
If instead of using "grpValue" I type in the value manually for example value "3" it does work. But I want it to use grpValue.
So this for example does work.
$("#ID option[value=3]").prop('selected', 'selected').change();
What am I doing wrong in the first line?
Would appreciate the help, thanks in advance.
EDIT: I've already tried using option[value='grpValue'], doesn't work.
$(document).ready(function(){
$("#sel option[value='c']").attr("selected",true);
$("#sel option[value='c']").prop("selected",true);
});
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<form>
<select id="sel">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</form>
</body>
</html>
you can use any one from prop() or attr() method both of useful
Is grpValue a variable? If so
$("#ID option[value="+grpValue+"]").prop('selected', 'selected').change();
will make the attribute selector do the work.
BTW, I think
$obj.prop('selected', true);
is the correct expression for prop.
$('#id_of_select').val('value_of_option_here');
Edit: To explain why the above code works. The first part:
Is the jQuery we use the following method to select an element by it's id, we could also select an element by it's class by simply changing the '#' to a '.'.
$('#id_of_select')
The statement following it refers to the value attribute that is attached to every input, select, textarea and button. The value is the string that is passed through when a form is submitted. For inputs this is the typed text, for selects it's the value of the selected option.
When we click an option in a select field, what we are actually doing is grabbing the value of the option and setting it as the selects value also, selects know what value is selected via the value, it can then grab the option text associated with this value. The code below (with a parameter) will set the value of the select field, in the same way it would if you were to click the option.
Note .val must have a parameter otherwise you are just asking jQuery what the value of the selected field is. With a value will set, without a value will get.
.val('value_of_option_here');
Hope this is a little more useful than my original answer, I've tried to break it down as much as possible though if it's a little confusing let me know.
Working example :
$("#ID option[value='b']").prop('selected', 'selected').change();
// if value in variable just replace $("#ID option[value="+valueInVar+"]")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ID" >
<option value = "a">a</option>
<option value = "b">b</option>
<option value = "c">c</option>
</select>
I want to assign the chosen option from the dropdown to become the selectedSubject variable but am having problems with it, I had code which half worked...
selectedSubject = $('select#subject-options').val();
But when a different option is selected it doesn't change??
And need it change for the game I am creating
HTML:
<p>Subjects</p>
<select id="subject-options" name="subject-options">
<option selected disabled >Please Choose</option>
<option id="BBT" value="$BBT">Big Bang Theory</option>
<option value="$LOTR">Lord Of The Rings</option>
<option value="$EPL">EPL Football Teams</option>
<option value="$ASIA">Asian Countries</option>`
</select>
Jquery:
const $BBT = ['sheldon','leanord','spock','cheescake``factory','howard','raj','star` `trek','penny','amy','bernadette','physics','laundry','halo` `night','dumplings', 'brisket','nasa','string theory','dark matter',` `'comiccon'];
let selectedSubject = $BBT;
selectedSubject = selectedSubject[Math.floor(Math.random() * selectedSubject.length)];
I have been through 7 different questions similar and couldn't find anything that helped me, so if anyone could help me directly or direct me to another question that has been answered that will help me in my troubles.
You must add an event handler to #subject-options to update the selectedSubject variable each time you change your selection.
$('#subject-options').on('change', function() {
selectedSubject = $('#subject-options option:checked').val();
});
JS Bin
In your jQuery selector you grab the select object itself. You need the option object and especially the one that is selected.
selectedSubject = $('select#subject-options option:selected').val();
I have a drop down list (DDL)...
I would usually just use $('#ddl option:selected').val()
but I have stored the jQuery object...
var myDDL = $('#ddl');
I can't figure out how I would use the variable myDDL alongside with option:selected
Not sure how to word my question really...
You simply need to call val() on the select object to get the selected value.
$('#ddl').val()
To get the variable just for the sake of knowing you can use find
selectedVal = myDDL.find('option:selected').val();
The .val() method is primarily used to get the values of form elements
such as input, select and textarea. In the case of select elements, it
returns null when no option is selected and an array containing the
value of each selected option when there is at least one and it is
possible to select more because the multiple attribute is present, jQuery Docs
Please try this.
Call this below function to see the effects.
----------------------- JS-Code -----------------------
TestFunction();
function TestFunction() {
var myDDL = $('#ddl');
var selectedVal = myDDL.find('option:selected').val();
alert(selectedVal);
}
-------------------- HTML Code --------------------------
<div id="divTest">
<select id="ddl">
<option>one</option>
<option selected="selected">two</option>
</select>
</div>
HTML:
<select id="ddlCountry" name="ddlCountry">
<option selected="selected" value="1">India
</option>
<option value="2">USA
</option>
</select>
JQuery:
$('#ddlCountry').val()
I hope this helps. If this does resolve your problem, please mark the post as answered.
Thanks,
Prashant
Try with this:
myDDL.find('option:selected').val();
As myDDL is a jQuery object, so you can use .find() method to get the selected value.
There can be many options in a SELECT dropdown.
<select id="sel">
<option value="car">1</option>
<option value="bike">2</option>
<option value="cycle">3</option>
...
</select>
I'm creating a Update Profile page where a user's profile is retrieved from the database and a form is shown with those values. When it comes to SELECTdropdown, there are many options. So, its tedious test all values
if (value == '1')
echo "<option selected value='car'>1</option>";`
So, I want to have the corresponding option selected from its value. Like when I do something like sel.value = 'bike' using JavaScript the option 2 should be selected.
You can select the value using javascript:
document.getElementById('sel').value = 'bike';
DEMO
If you are using jQuery:
$('#sel').val('bike');
try out this....
JSFIDDEL DEMO
using javascript
document.getElementById('sel').value = 'car';
using jQuery
$('#sel').val('car');
document.getElementById('drpSelectSourceLibrary').value = 'Seven';
I have the following HTML
<select onchange="this.form.submit()" name="name">
<option value="9995101E01#17201044055PM">9995101E01#17201044055PM</option>
<option value="GRR-Example">GRR-Example</option>
<option value="admin">admin</option>
<option value="123w">123w</option>
</select>
May I know how I can use JQuery to option with value "admin"?
$('select[name=name] option:eq(2)').attr('selected', 'selected');
Demo.
Like this:
$("select[name='name'] option:eq(2)").attr("selected", "selected");
EDIT:
To do what you want in your new edit, that is, select the option that has the value of admin:
$("select[name='name'] option:contains('admin')").attr("selected", "selected");
See it working.
I think the nth-child pseudo-class is what you're looking for:
$('select option:nth-child(3)').attr('selected', 'selected');
I'd not advice setting value of select by using .attr('selected', 'selected').
It's bad practice. If two options have 'selected' attribute - then what is the value of select?
Here is the simple and easy version that will work:
$('select[name="name"]').val('admin');
DEMO
Just updating in case it helps someone. I had a similar requirement but in my case the dropdown was stored as a JavaScript variable. Also I liked how Denis Matafonov suggested to make the option in question selected. So here's the final block of code:
var target_dd = $('select[name=name]');
$(target_dd).val($(target_dd).find('option:eq(2)').html());
If you want to select nth option and trigger onchange event then:
function selectOption(nr) {
var select = $("select");
if (select.children().length >= nr) {
let value = select.find('option:eq(' + nr + ')').val();
select.val(value).change();
}
}