如果不存在具有该值的选项，则设置选择字段的所选值

Question

I want to set the selected value of a select box if it exists, and to add it to the select box if it does not exist.

How do I do that?

I have:

<select id="abc" name="abc">
</select>

I want:

  $('#abc').val(123);

afterwards:

<select id="abc" name="abc">
<option value="123" selected>
</select>

Answer 1

You can append element

var html = '<option value="123">123</option>';
jQuery("#abc").append(html);

Answer 2

First thing is that you can use jQuery append method to add any html element to your page. In this case, you may need to append an option element. So first thing you need is to check if that option exists. If it does not you need to append it into the select element. In both cases( whether it exists or not), you can set the value as selected using val() method:

 $(document).ready(function(){ select123(); });//document ready function select123() { if( ! $("#abc option[value=123]").length ) { $("#abc").append('<option value="123">123</option>'); } $("#abc").val("123"); }//select123 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="abc" name="abc"> </select> 

Answer 3

var valueExists = $("#abc option[value=123]");
if(!valueExists){

    ("#abc").append('<option>123</option>')
}



$("#abc option[value=123]")

will return empty array which is evaluted to "" so it is false otherwise Array of object of html Collection returned

Answer 4

How about the below code.

if($('#abc option[value=' + testValue + ']').length === 0) {
    $('#abc').append('<option value="' + testValue + '">' + testValue + '</option>');
}

Answer 5

Check if the value exists using $("#abc option[value='123']").length > 0 and if not, append.

 $(function(){ var val = '1234'; if($("#abc option[value='123']").length > 0){ alert('present') } else { var s = '<option value=' + val + '>' + val + '</option>'; $('#abc').append(s); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <select id="abc" name="abc"> <option value="123" selected> </select> 

Answer 6

Below code can help you started.

1. If the value is already present, then set it as the selected option.
2. Else append the value to dropdown.

Scenario 1: Value already exists in dropdown. So just select it.

 $(function() { var val = '1'; var exists = false; $('#abc option').each(function() { if (this.value == val) { $('#abc').val(val); exists = true; return false; } }); if (exists == false) { $('#abc').append('<option value="' + val + '" selected>' + val + '</option>'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="abc" name="abc"> <option value="1">1</option> <option value="2">2</option> </select> 

---

Scenario 2: Value not in dropdown. So append it.

 $(function() { var val = '123'; var exists = false; $('#abc option').each(function() { if (this.value == val) { $('#abc').val(val); exists = true; return false; } }); if (exists == false) { $('#abc').append('<option value="' + val + '" selected>' + val + '</option>'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="abc" name="abc"> <option value="1">1</option> <option value="2">2</option> </select>