JQuery下拉列表动态添加option的问题，百分百结贴

时间：2021-11-22 23:19:10
页面上有俩个下拉框，初始化的时候动态加载option项目，遇到了这样的问题，代码如下
var $newItem = $("<option value=''>-请选择-</option>");
            $drpCountry.append($newItem);
            $drpProvince.append($newItem);

此时页面加载后 drpProvince 下拉框 加载了这个新项，而drpCountry没有加载，
换了种写法：
$drpCountry.append($("<option value=''>-请选择-</option>"));
            $drpProvince.append($("<option value=''>-请选择-</option>"));
这样就可以了

那么针对第一种情况，大家有没有好的写法，推荐下。

11 个解决方案

#1

去掉$这个符号试试

#2

var newItem = $("<option value=''>-请选择-</option>");

drpCountry.append(newItem);

drpProvince.append(newItem);

#3

我试验了，还是不行 这样的方式 最后一个能添加上 前面的都添加不上！

#4

继续求解答！

#5

引用 4 楼  的回复:
继续求解答！

把第二个删掉看第一个能不能加上

#6

使用jquery标准写法吧！
$('#select1,#select2').append(appoption);和$('select').append(appoption);任选一种 

<html>

<body>

<select id="select1"></select>

<select id="select2"></select>

<script language="javascript">

	var appoption = "<option value=''>-请选择-</option>";

	//$('#select1,#select2').append(appoption);

	$('select').append(appoption);

</script>

</body>

</html>

#7

var newItem = "<option value=''>-请选择-</option>"; // 直接字符串好了,用jquery包装一层反而浪费资源
  $drpCountry.append(newItem);
  $drpProvince.append(newItem);

#8

看看API吧,jquery中的append方法传入的参数类型是String, Element!

#9

1、append() 方法在被选元素的结尾（仍然在内部）插入指定内容。 
$(selector).append(content);

2、appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。 
$(content).appendTo(selector)

楼主可以参考下：http://www.w3school.com.cn/jquery/manipulation_append.asp

#10

$drpCountry.append($newItem.clone());
  $drpProvince.append($newItem.clone());

明白了没

#11

多谢大家，结贴散分！

#1

去掉$这个符号试试

#2

var newItem = $("<option value=''>-请选择-</option>");

drpCountry.append(newItem);

drpProvince.append(newItem);

#3

我试验了，还是不行 这样的方式 最后一个能添加上 前面的都添加不上！

#4

继续求解答！

#5

引用 4 楼  的回复:
继续求解答！

把第二个删掉看第一个能不能加上

#6

使用jquery标准写法吧！
$('#select1,#select2').append(appoption);和$('select').append(appoption);任选一种 

<html>

<body>

<select id="select1"></select>

<select id="select2"></select>

<script language="javascript">

	var appoption = "<option value=''>-请选择-</option>";

	//$('#select1,#select2').append(appoption);

	$('select').append(appoption);

</script>

</body>

</html>

#7

var newItem = "<option value=''>-请选择-</option>"; // 直接字符串好了,用jquery包装一层反而浪费资源
  $drpCountry.append(newItem);
  $drpProvince.append(newItem);

#8

看看API吧,jquery中的append方法传入的参数类型是String, Element!

#9

1、append() 方法在被选元素的结尾（仍然在内部）插入指定内容。 
$(selector).append(content);

2、appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。 
$(content).appendTo(selector)

楼主可以参考下：http://www.w3school.com.cn/jquery/manipulation_append.asp

#10

$drpCountry.append($newItem.clone());
  $drpProvince.append($newItem.clone());

明白了没

#11

多谢大家，结贴散分！
标签：

相关文章