Question

我想设置选择框的选定值（如果它存在），并将其添加到选择框（如果它不存在）。

我该怎么做？

我有：

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

我想：

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

算账：

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

Answer 1

您可以追加元素

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

Answer 2

首先，您可以使用jQuery append方法将任何html元素添加到您的页面。在这种情况下，您可能需要附加option元素。因此，首先需要检查该选项是否存在。如果不是，则需要将其附加到select元素中。在这两种情况下（无论是否存在），您可以使用val()方法将值设置为所选：

＆＃13;

$(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

＆＃13;

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

＆＃13;

Answer 3

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

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



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

将返回空数组，其值为""，因此它为false，否则返回html Collection对象的数组

Answer 4

下面的代码怎么样。

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

Answer 5

使用$("#abc option[value='123']").length > 0检查值是否存在，如果不存在，则追加。

$(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

下面的代码可以帮助您入门。

如果该值已存在，则将其设置为所选选项。
否则将该值附加到下拉列表。

场景1：下拉菜单中已存在值。所以只需选择它。

$(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>

场景2：值不在下拉列表中。所以追加它。

$(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>

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

6 个答案: