CODEWITHSUNDEEP
javascriptjquery
RegarBoy
RegarBoy

Reputation: 3521

How to store the names attributes of selected options

If you look on console there is an object obj with the array of value parameter but the name parameter is only always have a single value. I would like to store the second attribute of option-"name" in the same way as values of value parameter are stored(in an array and not only single option name but all the names of all selected options). 

    //jQuery onchange()
     var obj = {};
         //get the value of option value.
     $('select[name=sensors]').on('change', function(){
         var value = $('select[name=sensors]').val();
      	 obj['value'] = value; 
         $('#demo').text(value);
         //get the value of option name.
         var name = $('option:selected').attr('name');
      	 obj['name'] = name;
         $('#demo2').text(name);
         console.log(obj); // returns array if value but single value of name parameter.
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select type='list' name='sensors' multiple>
      <optgroup label = 'sensors'>
          <option value= "e11" name = 'Electricity'>Electricity</option>
          <option value= "e12" name = 'Wind'>Wind</option>
          <option value= "e13" name = 'Temperature'>Temperature</option>
      </optgroup>
    </select>
    <!--jQuery onclick()-->
    <div id="demo"></div>
    <!--jQuery select()-->
    <div id="demo2"></div>
Explanation: As there option has the value attribute as native, there is no method to select name attribute, thus I have used attr() method, but still I cannot figure out how to do that.

If you select multiple options value parameter of "obj" object stores array of selected option values. But stores only one single value in name parameter.

Upvotes: 0

Views: 131

Answers (1)

Du D.
Du D.

Reputation: 5310

This is the quote from jQuery website and that is the reason why attr only returns the first name in the collection.

The .attr() method gets the attribute value for only the first element in the matched set. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.

    //jQuery onchange()
     var obj = {};
         //get the value of option value.
     $('select[name=sensors]').on('change', function(){
         var value = $('select[name=sensors]').val();
      	 obj['value'] = value; 
         $('#demo').text(value);
         //get the value of option name.
         var name = $('option:selected').map(function(i, el){
             return el.getAttribute("name");
         }).get();
      	 obj['name'] = name;
         $('#demo2').text(name);
         console.log(obj); // returns array if value but single value of name parameter.
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select type='list' name='sensors' multiple>
      <optgroup label = 'sensors'>
          <option value= "e11" name = 'Electricity'>Electricity</option>
          <option value= "e12" name = 'Wind'>Wind</option>
          <option value= "e13" name = 'Temperature'>Temperature</option>
      </optgroup>
    </select>
    <!--jQuery onclick()-->
    <div id="demo"></div>
    <!--jQuery select()-->
    <div id="demo2"></div>

Upvotes: 1

Related Questions