Question

我有一个下拉选择框和输入文本框。选择框显示我的类别，其外观如下：

<select id="category" name="category"> 
  <option value="">Please select...</option> 
  <option value="1">Category-1</option> 
  <option value="2">Category-2</option> 
  <option value="3">Category-3</option>   
  <option value="4">Other</option> 
</select>

输入文字框如下：

<input type="text" id="otherCategory" name="otherCategory" value="" style="display: none;">

我的问题是。当用户仅选择＆＃34;其他＆＃34;从下拉列表然后我需要填充输入文本。

我试过这样的事情：

$(document).ready(function() {

    $('#category').change(function() {
        var myValue = $(this).val();
        var myText = $("#category :selected").text();

        if (myText != '' AND myText == "Other") {
           $("#otherCategory").show();
        }
    });
});

但是我无法让它发挥作用。任何人都可以告诉我如何解决这个问题。

注意：我的下拉列表选择动态填充。

谢谢。

Answer 1

您在&&条件下缺少if。另外，你的情况

myText != ''是多余的，不是必需的。

当选择更改时，您需要隐藏input。

$(document).ready(function () {

    $('#category').on('change', function () {
        var myValue = $(this).val();
        var myText = $.trim($("#category :selected").text()).toLowerCase(); // Trim spaces and convert to lowercase for comparison

        $("#otherCategory").toggle(myText === 'other');
    });
});

演示：https://jsfiddle.net/tusharj/8ykfmtyt/1/

Answer 2

您需要使用&&代替AND

<强> Live Demo

if (myText != '' && myText === "Other") {
    $("#otherCategory").show();
}

您可以通过隐藏选项以进一步优化它，然后选择“其他”。当你将它与字符串'other'进行比较时，你不需要检查它是否为空，所以我从if语句中删除了这个条件。

Live Demo

$('#category').change(function () {
      $(this).find(":selected").text() === "Other" ?  
       $("#otherCategory").show() :  $("#otherCategory").hide();
});

Answer 3

如果用户选择其他选项显示输入字段，则尝试此Demo。

$(document).ready(function() {

    $('#category').change(function() {
        var myValue = $(this).val();
        var myText = $("#category :selected").text();

        if (myText == "Other") {
           $("#otherCategory").show();
        }
        else{
            $("#otherCategory").hide();
        }
    });
});

根据Jquery中的下拉选择框填充输入文本框

3 个答案: