8
\$\begingroup\$

I suspect there is a simpler way to find if a select has a certain option, but don't know what. The objective of the following is to check if the desired option exists or not, and if it does, set it as the selected option:

Markup

<input type="text" size="2" id="selectVal"/>
<button onclick="setSelect()">Set the select</button>
<select id="mySelect">
    <option value="0">Select an option</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
</select>

JS

function setSelect() {
    var desiredOption = $("#selectVal").val();
    if (desiredOption == '') {
        $("#selectVal").focus();
        return false;
    }
    var hasOption = $('#mySelect option[value="' + desiredOption + '"]');
    if (hasOption.length == 0) {
        alert('No such option');
    } else {
        $('#mySelect').val(desiredOption);
    }
    $("#selectVal").select();
}

To be clear, I wonder if a single method could do the job of the following two lines:

var hasOption = $('#mySelect option[value="' + desiredOption + '"]');
if (hasOption.length == 0)

Any suggestions?

jsfiddle here.

\$\endgroup\$

3 Answers 3

Reset to default
4
\$\begingroup\$

You could try and force the option to be selected. Because jQuery doesn't throw errors when it doesn't have a set of elements, you can use this to your advantage inside an if statement. Couple this with jQuery's chaining and you can do something like:

function setSelect() {
    var desiredOption = $("#selectVal").val();
    if (desiredOption == '') {
        $("#selectVal").focus();
        return false;
    }
    if (!$('#mySelect option[value="' +desiredOption+ '"]').prop("selected", true).length) {
        alert('No such option');
    }
    $("#selectVal").select();
}

Updated fiddle: http://jsfiddle.net/SPvrA/7/

\$\endgroup\$
1
  • 1
    \$\begingroup\$ Thanks. If indeed forcing selection of non-existing options does not throw an error (have not tested that in mainstream browsers), for my present use case that is all I care for. \$\endgroup\$ Commented Aug 29, 2011 at 11:44
0
\$\begingroup\$

How about plain vanilla Javascript:

if(document.getElementById("selectVal").options.namedItem(desiredOption)===null){
  // option  in desiredOption variable not found
}else{
  // option in desiredOption variable found
}
\$\endgroup\$
1
  • \$\begingroup\$ Good answers require at least one insightful observation about the code posted. Code only answers are considered poor answers and may be down voted or deleted. Please see the code review guidelines at codereview.stackexchange.com/help/how-to-answer. \$\endgroup\$ Commented Apr 23, 2020 at 16:08
0
\$\begingroup\$

The original JS code is prone to injection (e.g. ]) and unnecessarily verbose, as you said.

Here's a one-liner that also plays nice with dodgy user input (say, injecting ]" into the #selectVal field, which would break Andy E's approach.

function setSelect() {
    $("#mySelect").val($("#selectVal").val()).val($("#mySelect").val());
    $("#selectVal").select();
}

Why this works: the first call to $("#mySelect").val(...) selects the option if it exists, or makes the select input empty if it doesn't. The second call takes that value (either the same value, or an empty string), and sets it again, either keeping the value in place (if it exists), otherwise returning to the default (first) option.

Calling .val() four times in one line is a bit ugly, I know, but you can't argue with results. ;)

Fiddle with an example here.

\$\endgroup\$
1
  • \$\begingroup\$ Welcome to Code Review! You have presented an alternative solution, but haven't reviewed the code. Please edit to show what aspects of the question code prompted you to write this version, and in what ways it's an improvement over the original. It may be worth (re-)reading How to Answer. \$\endgroup\$ Commented Mar 10, 2020 at 9:41

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.