javascript - 如何存储所选选项的名称属性

Question

如果您在控制台上查看，会发现一个对象 obj 带有值参数数组，但名称参数始终只有一个值。我想以与存储值参数值相同的方式存储选项的第二个属性“名称”(在数组中，不仅是单个选项名称，而且是所有选定选项的所有名称)。

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

说明:由于该选项具有 native 的 value 属性，因此没有选择 name 属性的方法，因此我使用了 attr() 方法，但我仍然不知道如何做到这一点。

如果选择多个选项，“obj”对象的值参数将存储所选选项值的数组。但在名称参数中仅存储一个值。

Answer 1

这是来自 jQuery 网站的引用，这就是为什么 attr 只返回集合中的第一个名称的原因。

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>