CODEWITHSUNDEEP
javascript
user1904487
user1904487

Reputation: 13

Adding and Selecting an Option Value from a Drop Down Box

I need your help creating a function that would allow me to select a given option name based on a given var from a drop down box (using javascript) and if the value doesn’t exist then add it to the drop down list and then select it.

Example:

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

Upvotes: 1

Views: 1438

Answers (2)

Doug
Doug

Reputation: 3312

A non jQuerified version!

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");

Upvotes: 1

mako-taco
mako-taco

Reputation: 732

Using 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/

Upvotes: 1

Related Questions