I'm getting all the option drop downs like so
var options = $(".options"); Then I try a simple jquery .val to select the second option
options[0].val("1") And I get the following error
options[0].val is not a function Notes:
console.log(options[0]); // returns <select>...</select> Update Edit
https://codepen.io/TylerL-uxai/pen/NaxyJK?editors=1010 Relevant code is near the bottom --> listsDropDown
Here you go with a solution https://jsfiddle.net/9tao32gm/
$('select option[value="2"]').prop("selected", "selected");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value="1">1</option> <option value="2">2</option> </select>If you are using jQuery version < 1.6 then use attr instead of prop
$('select option[value="2"]').attr("selected", "selected"); Hope this will help you.
HTML code, then only I can help you better.There are different methods to set the selection of an option:
1. $("#select_id").get(0).selectedIndex=1; 2. $("#select_id").val(4); 3. $("#select_id option[text='jQuery']").attr("selected", true); $(".options") is document.getelementbyclassname which returns an HTML Collection instead of an array. To convert it to array, you use slice and call.
var optionsArr = $(".options"); optionsArr = [].slice.call(optionsArr); optionsArr.forEach(function (item, index){ $('.selectList'+index+' option[value='+index+']').attr("selected", "selected"); }); For more detail, see this answer Using forEach on an array from getElementsByClassName results in “TypeError: undefined is not a function”
