Question

我需要你的帮助创建一个函数，允许我根据下拉框中的给定var选择给定的选项名称（使用javascript）如果该值不存在，则将其添加到下拉列表中，然后选择它。

示例：

<html>

<head>

<script type="text/javascript">

function test() {

var option_name_to_look_for = "mangos"

if option_name_to_look_for is listed in the drop down box (drop) then select it

if the option_name_to_look_for is not listed in the drop down box (drop), automatically add it to the drop down list (drop) and select it.

}

</script>

</head>

<body>

<select id="drop" style="width: 200px;">
<option value="0"></option>
<option value="1">apples</option>
<option value="2">oranges</option>
<option value="3">pears</option>
<option value="4">mangos</option>
<option value="5">bananas</option>
<option value="6">kiwis</option>

</select>

</body>

</html>

Answer 1

使用jquery：

var found = false;
var search = 'something not in the list';
$("#drop").children().each(function() {
    if($(this).html() == search) {
        found = true;
        $(this).attr('selected', true);
        return;
    }
});
if(!found) {
    var nextValue = $("#drop").children(":last").val() + 1;
    $("#drop").append('<option value="' + nextValue + '">'+search+'</option>');
    $("#drop").children(":last").attr('selected', true);
}

http://jsfiddle.net/Zhk5w/1/

Answer 2

非jQuerified版本！

function selectMe(name){
  var select = document.getElementById("drop"),
      options = select.options,
      found = false;

  //Search for it!
  for (var x=0; x<options.length; x++){
    if(options[x].text==name){
      options[x].selected=true;
      found = true;
      break;
    }
  }

  //if it isn't found, add it!
  if(!found){
    var option = document.createElement("option");
    option.text = name;
    option.value = options.length;
    select.appendChild(option);
    option.selected=true;
  }
}

selectMe("mangos");

从下拉框中添加和选择选项值

2 个答案: