javascript - 隐藏没有 id 的输入文本字段

Question

好的，这是我的问题。

我有一些代码无法访问该文件，因此我想使用 Java 脚本或 Jquery 来控制它。

<li class="aaAttrty" id="aaAttrty_PRACSET">
<label>Practice Setting</label>
<select name="f46">
<option value="%null%" id="aaAttrTySelect_PRACSET_Null">Select One
</option><option value="PRIVATE_PRAC" 
id="aaAttrTySelect_PRACSET_PRIVATEPRAC">Private Practice (Solo)
</option><option value="ENDO_GRP_PRAC" 
id="aaAttrTySelect_PRACSET_ENDOGRPPRAC">Endodontic Group Practice
</option><option value="MULTI_GRP_PRAC" 
id="aaAttrTySelect_PRACSET_MULTIGRPPRAC">Multi-discipline Group Practice 
(Specialists and Generalists)
</option><option value="MILITARY" 
id="aaAttrTySelect_PRACSET_MILITARY">Military/Government Practice
</option><option value="DENT_FAC" id="aaAttrTySelect_PRACSET_DENTFAC">Dental 
School Faculty
</option><option value="INDPEN_CONT" 
id="aaAttrTySelect_PRACSET_INDPENCONT">Independent Contractor
</option><option value="NO_PRAC" id="aaAttrTySelect_PRACSET_NOPRAC">Not 
Currently in Practice
</option><option value="OTHER" id="aaAttrTySelect_PRACSET_OTHER">Other
</option></select>

<input type="text" name="f47" size="20" maxlength="4000" value="">
</li>

我想要做的是隐藏输入字段，除非选择“其他”选项。

我尝试使用它，但它不起作用，也不知道为什么。

    $("#aaAttrty_PRACSET > ul > li > input[type=text]").hide();
    $("#aaAttrty_PRACSET > ul > li > input[value=OTHER]").click(function () 
    {
        if ($("#aaAttrty_PRACSET > ul > li > 
    input[value=OTHER]:checked").length > 0) {
            $("#aaAttrty_PRACSET > ul > li > input[type=text]").show();
        } else { $("#aaAttrty_PRACSET > ul > li > input[type=text]").hide(); 
    }
    });

我还尝试了 Java 脚本方法，它实际上破坏了整个网站，这很奇怪。这是我的 Java 脚本尝试。

$(document).ready (function CheckOther(val){
var element=document.getElementById('#aaAttrty_PRACSET input');
if(val==='OTHER')
    element.style.display='block';
else  
   element.style.display='none';
 });

我更喜欢 Jquery 方法，所以如果有人有任何想法请告诉我。这是我无法使用的一件事，那就是 name="xxxx"，因为它是动态表单，因此会发生变化。

预先感谢您的任何想法。

柯克

Answer 1

您的 jQuery 选择器比它们需要的要复杂一些。由于我们不能依赖 name 属性名称(你说它总是会改变)，所以我们可以依赖 OTHER 选项标签 ID 和 li 标签 ID

您还应该使用 change事件<select>标签而不是 click事件于 <option>标签。例如

var $theInput = $("#aaAttrty_PRACSET > input:first");
$theInput.css("display", "none");

$("#aaAttrTySelect_PRACSET_OTHER").parent().on("change", function() {
  if (this.value === "OTHER") {
    $theInput.css("display", "block");
  } else {
    $theInput.css("display", "none");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="aaAttrty" id="aaAttrty_PRACSET">
  <label>Practice Setting</label>
  <select name="f46">
      <option value="%null%" id="aaAttrTySelect_PRACSET_Null">Select One</option>
      <option value="PRIVATE_PRAC"id="aaAttrTySelect_PRACSET_PRIVATEPRAC">Private Practice (Solo)</option>
      <option value="ENDO_GRP_PRAC"id="aaAttrTySelect_PRACSET_ENDOGRPPRAC">Endodontic Group Practice</option>
      <option value="MULTI_GRP_PRAC" id="aaAttrTySelect_PRACSET_MULTIGRPPRAC">Multi-discipline Group Practice(Specialists and Generalists)</option>
      <option value="MILITARY" id="aaAttrTySelect_PRACSET_MILITARY">Military/Government Practice</option>
      <option value="DENT_FAC" id="aaAttrTySelect_PRACSET_DENTFAC">Dental School Faculty</option>
      <option value="INDPEN_CONT" id="aaAttrTySelect_PRACSET_INDPENCONT">Independent Contractor</option>
      <option value="NO_PRAC" id="aaAttrTySelect_PRACSET_NOPRAC">Not Currently in Practice</option>
      <option value="OTHER" id="aaAttrTySelect_PRACSET_OTHER">Other
  </select>
  <input type="text" name="f47" size="20" maxlength="4000" value="">
</li>