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>
posted on 2017-04-07 15:05  dreamstar  阅读(356)  评论(0编辑  收藏  举报