Question

如何使用类似于此输入创建示例的jquery中的选项创建一个选择DOM对象？

$('<input />', {
  name: 'age',
  type: 'number',
  placeholder: 'enter a number 1'
}).appendTo('#app');

有没有办法创建它传递属性？

Answer 1

您可以通过将整个select选项作为字符串

传递来创建

$('<select name="number">' +
  '<option>1</option>' +
  '<option>2</option>' +
  '<option>3</option>' +
'</select>').appendTo('body');

Answer 2

另一种解决方案，使用具有所需value和text的对象数组，并根据数组信息创建新的select元素。

＆＃13;

$(document).ready(function () {
	var arrSelect = [
		{ value: 1, text: 'One' },
		{ value: 2, text: 'Two' },
		{ value: 3, text: 'Three' }
	];

	var select = $('<select>').appendTo('body'); //Create new select element
  
	//Loop through the array of objects and then create new option and append to select element
	arrSelect.map(function (arr) { select.append($("<option>").attr('value', arr.value).text(arr.text)) });
  
	$("body").append(select); //Append select to body element
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

＆＃13;

Answer 3

使用jQuery创建元素时，可以在options对象中使用任何属性甚至jQuery方法，这样就可以了

＆＃13;

$('<select />', {
  name   : 'test',
  on     : {
      change : function() { /* stuff */ }
  },
  append : [
      $('<option />', {value : "1", text : "Opt 1"}),
      $('<option />', {value : "2", text : "Opt 2"}),
      $('<option />', {value : "3", text : "Opt 3"})
  ]
}).appendTo('#app');

＆＃13;

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

＆＃13;

Answer 4

1_您可以选择多个DOM Multi DOM Select

像这样：

$( "div, .sCLASS, p.myClass" ).whatever...

2_您还可以选择带有Single DOM Select

的单个DOM 像这样：

$( "p" + ".sCLASS" ).whatever...

但是你不能用它传递arg

Answer 5

创建对象选择，然后附加选项对象。

$('<select />', {
  id: 'my-numbers',
  name: 'select-number'
})
.append($("<option/>", {
    value: '1',
    text: 'number1'
}))
.append($("<option/>", {
    value: '2',
    text: 'number2'
}))
.appendTo('#app');

使用jQuery，Passing Attributes中的选项创建选择DOM对象

5 个答案: