jQuery处理html之select
html代码
<!-- 仓库选择器 -->
<select id="warehouseid" name="warehouseid">
<option value="">请选择</option>
<option value="2" ispartition="0">仓库2</option>
<option value="3" ispartition="1" selected="">仓库3</option>
<option value="3" ispartition="1">仓库4</option>
</select>
<!--库位选择器 -->
<select id="location" name="location">
<option value="">请选择</option>
<option value="2">库位1</option>
<option value="3" selected="">库位3</option>
<option value="4">库位4</option>
</select>
js代码
<script>
//第1点:当选择框的值改变时触发的函数
$("#warehouseid").change(function() {
//(1):获取select选中的value
var warehouseid = $("#warehouseid").val();
//(2)获取select选中的text
var warehouseName = $("#warehouseid").find("option:selected").text();
//(3):获取select选中项 自定义属性的值
var ispartition = $("#warehouseid").find("option:selected").attr("ispartition");
//清空id为location 的选择框的已有选项
$("#location").empty();
//给id为location的选择框 加入新选项
var options = "<option value='1'>新库位1</option><option value='2'>新库位2</option>";
$("#location").append(options);
});
</script>
html代码
<table>
<tbody id="addMaterialTbody">
<tr>
<td width="50"><select name="locationid[]"> option
value="">请选择
</option>
<option value="2">库位2</option>
<option value="3">库位3</option>
<option value="4">库位4</option>
</select></td>
<td width="50"><select name="locationid[]"> option
value="">请选择
</option>
<option value="2">库位2</option>
<option value="3">库位3</option>
<option value="4">库位4</option>
</select></td>
</tr>
</tbody>
</table>
<button onclick="changeoptions()">更改</button>
js代码
<script>
function changeoptions() {
//重点选择所有name为locationid[]的选择框
//$("#addMaterialTbody select[name='locationid[]']")
//清空name为locationid[]的选择框的已有选项
$("#addMaterialTbody select[name='locationid[]']").empty();
//给name为locationid[]的选择框 加入新选项
var options = "<option value='1'>新库位1</option><option value='2'>新库位2</option>";
$("#addMaterialTbody select[name='locationid[]']").append(options);
}
</script>
<script>
//重点选择所有name为locationid[]的选择框
$("#addMaterialTbody select[name='locationid[]']")
// 获取所有name为stoLocList的元素,修改select中的option
var x = document.getElementsByName("locationid[]"); //,
for (var i = 0; i < x.length; i++) {
x[i].innerHTML = locatioOption;
}
</script>