Question

我尝试通过更改下拉列值来更改表单输入字段。现在我发现只有一个下拉选择的解决方案..即，如果我选择一个下拉值，一些请求的输入值正在...但不明白如何获得每个下拉值的不同输入值..这里我给了编码我正在使用的..

  <script type="text/javascript">
    $(function () {
        $("#ddlPassport").change(function () {
            if ($(this).val() == "airtel") {
                $("#airtel").show();
            } else {
                $("#airtel").hide();
            } 
        });
    });

    $(function () {
        $("#ddlPassport").change(function () {  
            if ($(this).val() == "dishtv") {
                $("#dishtv").show();
            } else {
                $("#dishtv").hide();
            } 

        });
    });
</script>
<select id="ddlPassport">
    <option title="Airtel DTH" value="airtel" id="">Airtel DTH</option>
    <option title="Reliance" value="reliance" id="">Big TV/Reliance Digital TV</option>
    <option title="SUNTV" value="suntv">SUN TV</option>
    <option title="Videocon" value="videocon">Videocon D2H</option>
    <option title="DISHTV" value="dishtv">DISH TV</option>
    <option title="Tata Sky" value="tatasky">TATA SKY</option>

</select>         
<div class="form-group form-group-icon-left" id="airtel" style="display:none;">
         <i class="fa fa-pencil input-icon input-icon-highlight"></i>
             <label for="txtMobileNo"><span id="">Customer ID :</span></label>
                <input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Customer ID">
     </div>
     <div class="form-group form-group-icon-left" id="dishtv" style="display:none;">
         <i class="fa fa-pencil input-icon input-icon-highlight"></i>
             <label for="txtMobileNo"><span id="">Mobile No. or Card No. :</span></label>
                <input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Mobile No. or Card No.">
     </div>
     <div class="form-group form-group-icon-left" id="reliance-sun" style="display:none;">
         <i class="fa fa-pencil input-icon input-icon-highlight"></i>
              <label for="txtMobileNo"><span id="">Smart Card No :</span></label>
                <input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Smart Card No.">
     </div>

Answer 1

看着你的代码，我注意到了一些问题。

问题1

$("#ddlPassport").change()

您的选择标记没有ID dllPassport ，它是空的。

问题2 您在页面上有多个HTML ID。

来自XHTML 1.0 Spec

在XML中，片段标识符的类型为ID，每个元素只能有一个ID类型的属性。因此，在XHTML 1.0中，id属性被定义为ID类型。为了确保XHTML 1.0文档是结构良好的XML文档，在上面列出的元素上定义片段标识符时，XHTML 1.0文档必须使用id属性。有关在将XHTML文档作为媒体类型text / html提供时确保此类锚点向后兼容的信息，请参阅HTML兼容性指南。

您正在尝试显示/隐藏ID dishtv 的元素，该元素适用于

<option title="Reliance" value="reliance" id="dishtv">

和

<div class="form-group form-group-icon-left" id="dishtv" style="display:none;">

问题3 在解决问题1和问题2之后，你的div将显示dishtv的ID，但是这个div嵌套在父div中，还有 display：none 所以你需要调用{{1}在这个div上也是： #airtel

修改

＆＃13;
＆＃13;
.show()
＆＃13;
＆＃13;
＆＃13;

Answer 2

试试这个

$(document).ready(function() {

$(".form-group").hide(); // Hide all form divs on page load

$("#ddlPassport").change(function () {

    var DTHname = $(this).val();

    $("#" + DTHname).show(500);

});
});

通过更改下拉列表输入字段更改

2 个答案: