Javascript 如何使用jQuery根据所选条目更改接口

我正在尝试更改选择不同条目时弹出的文本。这是我的下拉列表代码

<div class="dropdown">
    <select class="form-control" id="ltype" name="ltype">
      <option value="">Select the Leave Type</option>
           <option value="training">training</option>
           <option value="conference">conference</option>
           <option value="vacation">vacation</option>

    </select>
  </div>
  <div id="letter1" style="float:right; padding-right:70px;color:#FF0000;"></div>

选择休假类型
训练
会议
假期

这是我的jQuery脚本

<script>
jQuery(document).ready(function(){
    $('letter1').html('text entered');
    $("#ltype").change(function(){
        var ltyp = (this).val();
        if($ltyp == 1){
            $('letter1').html('one');
        }else if($ltyp == 2){
            $('letter1').html('two');
        }else if($ltyp == 3){
            $('letter1').html('three');
        }
    });
});</script>

jQuery（文档）.ready（函数（）{
$（'letter1'）.html（'text entered'）；
$（“#ltype”）.change（函数（）{
var ltyp=（this.val（）；
如果（$ltyp==1）{
$（'letter1'）.html（'one'）；
}否则如果（$ltyp==2）{
$（'letter1'）.html（'two'）；
}否则如果（$ltyp==3）{
$（'letter1'）.html（'three'）；
}
});
});

这不会产生任何结果。请帮我做这个

---

提前谢谢。

您在这段代码中出错了。您需要删除您的条件中的

$

Jquery

<script>
jQuery(document).ready(function(){
    $('letter1').html('text entered');
    $("#ltype").change(function(){
        var ltyp = (this).val();
        if(ltyp == 1){ //just remove the `$` in condition
            $('letter1').html('one');
        }else if(ltyp == 2){ //just remove the `$` in condition
            $('letter1').html('two');
        }else if(ltyp == 3){ //just remove the `$` in condition
            $('letter1').html('three');
        }
    });
});</script>

jQuery（文档）.ready（函数（）{
$（'letter1'）.html（'text entered'）；
$（“#ltype”）.change（函数（）{
var ltyp=（this.val（）；
如果（ltyp==1）{//只需删除条件中的`$`
$（'letter1'）.html（'one'）；
}否则，如果（ltyp==2）{//只需删除条件中的`$`
$（'letter1'）.html（'two'）；
}否则，如果（ltyp==3）{//只需删除条件中的`$`
$（'letter1'）.html（'three'）；
}
});
});

您在这段代码中出错了。您需要删除您的条件中的

$

Jquery

<script>
jQuery(document).ready(function(){
    $('letter1').html('text entered');
    $("#ltype").change(function(){
        var ltyp = (this).val();
        if(ltyp == 1){ //just remove the `$` in condition
            $('letter1').html('one');
        }else if(ltyp == 2){ //just remove the `$` in condition
            $('letter1').html('two');
        }else if(ltyp == 3){ //just remove the `$` in condition
            $('letter1').html('three');
        }
    });
});</script>

jQuery（文档）.ready（函数（）{
$（'letter1'）.html（'text entered'）；
$（“#ltype”）.change（函数（）{
var ltyp=（this.val（）；
如果（ltyp==1）{//只需删除条件中的`$`
$（'letter1'）.html（'one'）；
}否则，如果（ltyp==2）{//只需删除条件中的`$`
$（'letter1'）.html（'two'）；
}否则，如果（ltyp==3）{//只需删除条件中的`$`
$（'letter1'）.html（'three'）；
}
});
});

您的代码包含错误。
在使用jQuery选择器时，将“$”添加到变量中，并错过了“#”。
你可以试试这个：

<script> 
jQuery(document).ready(function(){
    $('#letter1').html('text entered');
    $("#ltype").change(function(){
        var ltyp = $(this).val();
        ltyp && $('#letter1').text(ltyp);
    }); 
});
</script>

jQuery（文档）.ready（函数（）{
$（'#letter1'）.html（'text entered'）；
$（“#ltype”）.change（函数（）{
var ltyp=$（this.val（）；
ltyp&$（'#letter1'）。文本（ltyp）；
}); 
});

您的代码包含错误。
在使用jQuery选择器时，将“$”添加到变量中，并错过了“#”。
你可以试试这个：

<script> 
jQuery(document).ready(function(){
    $('#letter1').html('text entered');
    $("#ltype").change(function(){
        var ltyp = $(this).val();
        ltyp && $('#letter1').text(ltyp);
    }); 
});
</script>

jQuery（文档）.ready（函数（）{
$（'#letter1'）.html（'text entered'）；
$（“#ltype”）.change（函数（）{
var ltyp=$（this.val（）；
ltyp&$（'#letter1'）。文本（ltyp）；
}); 
});

如果要检查selectedIndex，则不应使用

$（this.val（）

而应使用

$（this.prop）（“selectedIndex”）

请参见通过下拉列表的选定索引进行检查的示例

    $('#letter1').html('text entered');

    $("#ltype").change(function() {
      var ltyp = $(this).prop('selectedIndex');
      if (ltyp == 1) {
        $('#letter1').html('one');
      } else if (ltyp == 2) {
        $('#letter1').html('two');
      } else if (ltyp == 3) {
        $('#letter1').html('three');
      }
    });

请参见，它通过下拉菜单的选定索引进行检查并获取相应的值

    $('#letter1').html('text entered');

    $("#ltype").change(function() {
      var ltyp = $(this);
      if (ltyp.prop('selectedIndex') == 1) {
        $('#letter1').html(ltyp.val());
      } else if (ltyp.prop('selectedIndex') == 2) {
        $('#letter1').html(ltyp.val());
      } else if (ltyp.prop('selectedIndex') == 3) {
        $('#letter1').html(ltyp.val());
      }
    });

---

如果要检查selectedIndex，则不应使用

$（this.val（）

，而应使用

$（this.prop（'selectedIndex'）

请参见通过下拉列表的选定索引进行检查的示例

    $('#letter1').html('text entered');

    $("#ltype").change(function() {
      var ltyp = $(this).prop('selectedIndex');
      if (ltyp == 1) {
        $('#letter1').html('one');
      } else if (ltyp == 2) {
        $('#letter1').html('two');
      } else if (ltyp == 3) {
        $('#letter1').html('three');
      }
    });

请参见，它通过下拉菜单的选定索引进行检查并获取相应的值

    $('#letter1').html('text entered');

    $("#ltype").change(function() {
      var ltyp = $(this);
      if (ltyp.prop('selectedIndex') == 1) {
        $('#letter1').html(ltyp.val());
      } else if (ltyp.prop('selectedIndex') == 2) {
        $('#letter1').html(ltyp.val());
      } else if (ltyp.prop('selectedIndex') == 3) {
        $('#letter1').html(ltyp.val());
      }
    });

1）

var$ltyp=$（this.val（）如果使用
$ltyp
。2） 
选择中的值是
培训
，
会议
，
假期
，而不是
1,2,3
.1）
var$ltyp=$（this.val（）如果使用
$ltyp
。2） 
选择中的值是
培训
，
会议
，
假期
，而不是
1,2,3
。