使用JQuery访问Selects中动态创建的选项

时间:2018-08-06 03:43:18

标签: javascript jquery html

我有一些Select元素在一段时间内填充有更新的选项。我想以编程方式访问新选项,以检查选择项是否包含具有特定值的选项。

我尝试了以下代码段:

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});

(来自Check if value is in select list with JQuery

但是,这暴露的选项只是html中定义的占位符选项。如何访问通过将新的html推送到元素而创建的选项?

选择仅定义为

<select id=select-box><option>Placeholder</option></select>.  

要更新它们,我要传递几个联合的

<option>text</option> 

标记到$(“#select-box”)。html()。

2 个答案:

答案 0 :(得分:0)

以下是动态创建option并示例检查是否存在具有特定值的选项的示例:

var index = 1;
$('#add').click(function(event) {
    var val = index++;
    var option = $('<option value="' + val + '">' + val + '</option>');
    $('#select-box').append(option);
})
$('#check').click(function(event) {

    var val = $('#value').val();
    if (val)
        if ($('#select-box option[value="' + val + '"]').length)
            $('#result').text('exist');
        else
            $('#result').text('not exist');
    else
        $('#result').text('please enter a value to check');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id=select-box>
</select>
<br />
<button id="add">Add</button>
<br />
<input id="value" type="number" value="1" />
<button id="check">Check</button>
<br />
<br />
<span id="result">click the Check button to check</span>

答案 1 :(得分:0)

一个简单的示例代码:

$('#addOption').click(function() {
  $('#select-box').append('<option>new</option>');
  $('#select-box').append('<option>another new</option>');

  $('#result').append('<p>Dynamic options added</p>');
  $('#result').append('<p>Accessing all options:</p>');

  $('#select-box option').each(function() {
    $('#result').append('<li>' + this.value + '</li>');
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-box">
  <option>text</option>
</select>

<button id="addOption">
Add options
</button>

<div id="result">

</div>