在选择中添加选项并将数据属性添加到选项

Question

我有选择名称slc_pc，我想通过jquery代码附加选项。

我尝试这些脚本。 但这不起作用。

$("select[name='slc_pc']").append(new Option("Hello", "Hello", true, true).attr("abc",brand,"123",model));

Answer 1

如果将ID“ slc-pc”添加到select元素，则基本形式类似于以下形式：

$('#slc_pc').append($("<option></option>").attr({"value": key, "abc": brand, "123": model }).text(value)); 

Answer 2

试试这个

您在(new Option("Hello", "Hello", true, true) )之后添加)并从最后删除)

 $("select[name='slc_pc']").append(new Option("Hello", "Hello", true, true)).attr("abc", "brand", "123", "model"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name='slc_pc'> <option>select</option> </select> 

Answer 3

 $(function(){ var brand = 'test'; var model = '123'; var brand1 = 'abc'; var model1 = '456'; $(".slc_pc").append("<option value='hello' data-brand='" +brand+ "' data-model='" +model+ "'>hello</option><option value='hello1' data-brand='" +brand1+ "' data-model='" +model1+ "'>hello1</option>"); }) $(document).on("change",".slc_pc", function(){ var option = $("option:selected", this); alert("value : "+ $(this).val() + ", brand : "+$(option).data('brand') + ", model : " + $(option).data('model')); }) 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <select class='slc_pc' name='slc_pc'> <option value=''>--select--</option> </select> 

可以通过这样的事情来完成。

Answer 4

您的代码中有一些错误。 首先，要设置多个属性，您需要将它们作为对象传递。 其次， data名称的属性名称和值不正确。 brand和model应分别为属性，而abc和123应分别为其值。

new Option将创建一个没有attr方法的option元素。 您可以使用jQuery创建新元素。

这是正确的方法

$('select[name="slc_pc"]')
  .append($('<option />')  // Create new <option> element
    .val('Hello')            // Set value as "Hello"
    .text('Hello')           // Set textContent as "Hello"
    .prop('selected', true)  // Mark it selected
    .data({                  // Set multiple data-* attributes
      brand: 'abc',
      model: '123'
    })
  );