javascript 动态更改下拉菜单

附上我的网页截图。在该图中，在回归类型下拉列表框中，有三个值 1、2 和 3 因此，如果我选择 1 或 2，则下拉菜单中不应出现“F1”。如果是 value3，那么它应该出现。

为此，我在 body 标签下添加了 onload。

HTML 代码:

<div class = "cl-regr" id="div-regr">
        <select name = "regr" id="drop-regr">
                                    <option selected="selected" disabled>-----Select-----</option>
                                    <option value = "1"> ips </option>
                                    <option value = "2"> ips sanity </option>
                                    <option value = "3"> Features </option>

                            </select>
        </div>

         <div class = "cl-ftr" id="div-ftr" onchange="displayFeatureList()">
                  <select name = "ftr" class = "cl2" id="drop-ftr">
                         <option value = "f1"> F1 </option>
                         <option value = "f2"> F2 </option>
                         <option value = "f3"> F3 </option>
                         <option value = "f4"> F4 </option>
                 </select>
         </div>

单独的 .js 文件中的相应脚本:

function func1(){
        $(".cl-ftr").each(function() {
                var that  = $(this);
                that.find("div.cl2").style.visibility="hidden";
        });
};

function displayFeatureList(){

        var d_obj = document.getElementById("drop_reg").value;
        var op = d_obj.options[d_obj.selectedIndex].value;
        if (op == 3){
                document.getElementById("drop_ftr").style.visibility = 'visible';
        }
        else{
                document.getElementById("drop_ftr").style.visibility = 'hidden';
        }

};

我从 body 标签调用 func1

<body onload="func1()">

我面临的问题是， 1)每当页面加载时，第一行的“F1”下拉列表框就会隐藏(即ClientIP - 10.213.174.90) 2)如果我更改该值，displayFeatureList函数不会产生任何效果。

任何帮助将不胜感激!!

最佳答案

你语法错误

$(this) 是 jquery 对象 style.visiblity 其 dom 函数
与 css() 一起使用jquery 函数。style.visiblity 不是 jquery 对象。
为了更好，我的建议使用 css .cl2{visiblity:hidden} 而不是 js
cl2 类不包含 div，因此请在选择器中删除带有 cl2 的 div，如 查找('cl2')
修复 ID 名称拼写错误 - 而不是 _
通过第一次选择添加更改事件
从下拉列表中获取值直接调用selectelement.value。无需指定索引

function func1() {
  $(".cl-ftr").each(function() {
    var that = $(this);
    that.find(".cl2").css('visibility', "hidden");
  });
};

function displayFeatureList() {
  var d_obj = document.getElementById("drop-regr").value
  if (d_obj == '3') {
    document.getElementById("drop-ftr").style.visibility = 'visible';
  } else {
    document.getElementById("drop-ftr").style.visibility = 'hidden';
  }

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="func1()">
  <div class="cl-regr" id="div-regr">
    <select name="regr" id="drop-regr" onchange="displayFeatureList()">
                                    <option selected="selected" disabled>-----Select-----</option>
                                    <option value = "1"> ips </option>
                                    <option value = "2"> ips sanity </option>
                                    <option value = "3"> Features </option>

                            </select>
  </div>

  <div class="cl-ftr" id="div-ftr" >
    <select name="ftr" class="cl2" id="drop-ftr">
                         <option value = "f1"> F1 </option>
                         <option value = "f2"> F2 </option>
                         <option value = "f3"> F3 </option>
                         <option value = "f4"> F4 </option>
                 </select>
  </div>

关于javascript 动态更改下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45102300/

javascript 动态更改下拉菜单

上一篇：javascript - 跳过了 773 帧!应用程序可能在其主线程上做了太多工作。 [安卓网页浏览]

下一篇：javascript - 动态下拉问题