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>

我要做的是隐藏输入字段，除非选择了OTHER选项。

我试图使用它，但它不工作，不知道为什么。

    $("#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 Script Method，它实际上一起打破了网站，这很奇怪。这是我的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选择器比它们需要的要复杂一些。因为我们不能依赖名称属性名称（你说它总是会改变）所以我们可以依赖于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>

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

1 个答案: