Question

如何使用JavaScript或jQuery将下面的数组数据添加到select框中？

 var SHIFT_Plants = [
              { Plant: 0, PlantName: "" },
              { Plant: 2737, PlantName: "PM1" },
              { Plant: 2738, PlantName: "PM2" },
              { Plant: 2739, PlantName: "SSP" },
              { Plant: 2740, PlantName: "UT1" },
              { Plant: 2741, PlantName: "UT2" },
              { Plant: 2742, PlantName: "TW1" },
              { Plant: 2743, PlantName: "TW2" },
              { Plant: 2744, PlantName: "TW3" },
              { Plant: 2745, PlantName: "TW4" },
              { Plant: 2746, PlantName: "FL1" },
              { Plant: 2747, PlantName: "FL2" },
              { Plant: 2748, PlantName: "FL3" },
              { Plant: 2749, PlantName: "FL4" },
              { Plant: 2750, PlantName: "MS1" },
              { Plant: 2751, PlantName: "MS2" },
              { Plant: 2752, PlantName: "PY1" },
              { Plant: 2753, PlantName: "PY2" },
              { Plant: 2754, PlantName: "DDX" },
              { Plant: 2755, PlantName: "DT1" },
              { Plant: 2756, PlantName: "DT2" }
        ];

Answer 1

Download jQuery from here

这会更快，更干净。

SUMPRODUCT

添加多个选项

 $.each(selectValues, function(key, value) {   
         $('#mySelect')
             .append($("<option></option>")
                        .attr("value",key)
                        .text(value)); 
    });

Answer 2

使用jQuery，因为它支持许多功能。

使用$.each遍历数组，并将每个数组项作为Object。然后使用其键访问对象，例如Plant和PlantName来获取其值。

请记住将jQuery导入HTML文件。

$(function(){

var SHIFT_Plants = [
              { Plant: 0, PlantName: "test" },
              { Plant: 2737, PlantName: "PM1" },
              { Plant: 2738, PlantName: "PM2" },
              { Plant: 2739, PlantName: "SSP" },
              { Plant: 2740, PlantName: "UT1" },
              { Plant: 2741, PlantName: "UT2" },
              { Plant: 2742, PlantName: "TW1" },
              { Plant: 2743, PlantName: "TW2" },
              { Plant: 2744, PlantName: "TW3" },
              { Plant: 2745, PlantName: "TW4" },
              { Plant: 2746, PlantName: "FL1" },
              { Plant: 2747, PlantName: "FL2" },
              { Plant: 2748, PlantName: "FL3" },
              { Plant: 2749, PlantName: "FL4" },
              { Plant: 2750, PlantName: "MS1" },
              { Plant: 2751, PlantName: "MS2" },
              { Plant: 2752, PlantName: "PY1" },
              { Plant: 2753, PlantName: "PY2" },
              { Plant: 2754, PlantName: "DDX" },
              { Plant: 2755, PlantName: "DT1" },
              { Plant: 2756, PlantName: "DT2" }
        ];
        
        $.each(SHIFT_Plants, function( key, value ) {
                    
          var opt = "<option value="+ value.Plant +" >"+ value.PlantName +"</option>";
          
          $('#test').append(opt);
          
        });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
</select>

如何添加选择元素的选项？

2 个答案: