Question

附上我的网页截图。在该图片中，在“回归类型”下拉列表框中，有三个值，分别为1,2和3 因此，如果我选择1或2，则下拉到＃34; F1＆＃34;不应该出现。如果是value3，那么它应该出现。

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

HTML CODE：

<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）每当页面加载时，＆＃34; F1＆＃34;第一行的下拉列表框隐藏（即ClientIP - 10.213.174.90） 2）如果我改变了值，displayFeatureList函数没有任何效果。

任何帮助都将非常感谢!!

Answer 1

您语法错误

$(this)是jquery对象style.visiblity其dom函数
与css() jquery函数一起使用。style.visiblity不是jquery对象。
为了更好地建议，请使用css .cl2{visiblity:hidden}代替js
cl2类不包含div，因此请在选择器div

cl2

find('cl2')

修正了ID名称拼写错误 -而不是_
首先选择
从下拉列表中获取值直接调用selectelement.value。无需指定索引

＆＃13;

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';
  }

};

＆＃13;

<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>

＆＃13;

Answer 2

从各方面来说，您的代码质量都不是很好。

它充满了拼写错误（将_更改为-，缺少ID的单个字母等。）这样，任何事情都无法奏效。多加小心。
id必须是唯一的。如果id在同一HTML文档中出现两次，根据定义，该文件无效。（它仍然会加载，但你必须预料到错误。）你可能希望保持id s添加一个动态数字（行号）以保持它们的唯一性
如果您使用jQuery，默认情况下使用它。不要混淆jQuery（func1()）和JS DOM方法（displayFeatureList）

我将代码缩减为以下内容（为了更好地理解，我对整个JS代码进行了评论）：

＆＃13;

$(document).ready(function() { //run when page loading is complete
  $(".regessionTypeCell").each(function() { //for each regessionTypeCell class (parent div, might be a table cell in your case)
    $(this).find(".drop-regr").change(function(event) { //set onChange function for the containing drop-regr class
      var conditionalDropdown = $(this).find(".cl-ftr"); //get the conditional dropdown element
      if ($(this).find(".drop-regr").val() == 3) { //if selected index is equal 3
        conditionalDropdown.show(); //show dropdown
      } else {
        conditionalDropdown.hide(); //hide dropdown
      }
    }.bind($(this))); //bind this to the inner function
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="regessionTypeCell">
  <div class="cl-regr">
    <select name="regr" class="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" style="display:none">
    <select name="ftr" class="drop-ftr">
    <option value="f1"> F1 </option>
    <option value="f2"> F2 </option>
    <option value="f3"> F3 </option>
    <option value="f4"> F4 </option>
  </select>
  </div>
</div>

<div class="regessionTypeCell">
  <div class="cl-regr">
    <select name="regr" class="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" style="display:none">
    <select name="ftr" class="drop-ftr">
    <option value="f1"> F1 </option>
    <option value="f2"> F2 </option>
    <option value="f3"> F3 </option>
    <option value="f4"> F4 </option>
  </select>
  </div>
</div>

＆＃13;

javascript动态更改下拉列表

2 个答案: