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

我试图通过更改下拉值来更改表单输入字段。。 现在我只找到了一个下拉选择的解决方案。。i、 例如，如果我选择一个下拉列表值，则会得到一些请求的输入值。。但不了解如何为每个下拉列表值获取不同的输入值。。在这里，我给出了我使用的代码

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

---

看看你的代码，我发现了几个问题

问题1

您的select标记没有id dllPassport，它是空的

问题2 页面上有多个HTML ID

从

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

您试图显示/隐藏id为dishtv的元素，该id同时适用于这两个元素

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

试试这个

$(document).ready(function() {

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

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

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

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

});
});

---

您的新代码正在运行-我已经编辑了我的帖子以简化jQuery脚本。

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

$(document).ready(function() {

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

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

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

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

});
});