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

Question

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

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

说明：由于该选项的 value 属性为 native，因此没有选择 name 属性的方法，因此我使用了 attr() 方法，但我仍然不知道该怎么做。

如果您选择多个选项值参数“obj”对象存储所选选项值的数组。但 name 参数中只存储一个值。

Answer 1

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

.attr() 方法只获取第一个元素的属性值 在匹配的集合中。要单独获取每个元素的值， 使用循环结构，例如 jQuery 的 .each() 或 .map() 方法。

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