CODEWITHSUNDEEP
javascriptjqueryhtml
Pratik
Pratik

Reputation: 79

Handle Select box value with Jquery

I have select box with multiple dynamic values. How do I handle the value of select box, Please suggest way to optimize Jquery.

HTML:

  <select name="alphabet">
    <option value=""></option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
</select>

Jquery:

var alphabet = "B";

if (alphabet == "A") {
    $('select[name^="alphabet"] option[value="A"]').attr("selected", "selected");
} else if (alphabet == "B") {
    $('select[name^="alphabet"] option[value="B"]').attr("selected", "selected");
} else if (alphabet == "C") {
    $('select[name^="alphabet"] option[value="C"]').attr("selected", "selected");
}

http://jsfiddle.net/ysaa4uyc/2/

Thanks.

Upvotes: 0

Views: 671

Answers (3)

RekhaK
RekhaK

Reputation: 1

Add an id to the select box (having name attribute is not mandatory)

<select id="alphabet" name="alphabet">
  <option value=""></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>

If you are expecting for multiple selection of values, use 'multiple' attribute in the select box

 <select id="alphabet" multiple>
   <option value="A">A</option>
   <option value="B">B</option>
   <option value="C">C</option>
   <option value="D">D</option>
   <option value="E">E</option>
 </select>

Using id of the select box, selected value can be taken as

  $('select[id=alphabet]').val();

You can test the selected value using any event on the select box like

 $('select[id=alphabet]').change(function() {
     alert($('select[id=alphabet]').val());
 });

Above code will work for both single/multiple selection of values.

Upvotes: 0

Stewartside
Stewartside

Reputation: 20925

By you're example, if you want your jQuery to be more modular to allow for as many or as little values as you want then you can do it based on the variable.

$(document).ready(function() {
  var letters = 'ABCDE';
  var random = Math.round(Math.random() * 5) + 1;
  var letter = letters.substring(random - 1, random);
  $('select[name^="alphabet"] option[value="' + letter + '"]').attr("selected", "selected");

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="alphabet">
  <option value=""></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>

The main line is:

$('select[name^="alphabet"] option[value="' + letter + '"]').attr("selected", "selected");

This does a dynamic input based on your variable, or in my example based on the output of variable letter.

If you want to find out the current selected value, you can do a look up on the select change().

$(document).ready(function() {
  $('select[name^="alphabet"]').change(function() {
    var value = $(this).find(':selected').val();
    $('.output').text(value);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="alphabet">
  <option value=""></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>
<div>Value: <span class="output"></span>
</div>

Upvotes: 0

Man Programmer
Man Programmer

Reputation: 5356

http://jsfiddle.net/ysaa4uyc/4/

$('select[name^="alphabet"] option[value='+alphabet+']').attr("selected", "selected");

Upvotes: 2

Related Questions