Question

我在下拉菜单中有一个国家/地区列表

<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1">USA</option>
<option value="2" selected="">Canada</option>
<option value="3">Rest of the World</option>

<p><input type="text" name="state_field" value="" id="state"></p>

我的目标是：如果选择了值3，则输入字段＆＃34; state＆＃34;消失。如果选择了选项1或2，则应显示字段＆＃34; state＆＃34;。

如果用户已在输入字段中输入了值＆＃34; state＆＃34; （因为先前选择了选项1或2）并且他将其更改为选项3，代码应首先擦除在状态字段中输入的值，然后使该字段消失。

Javascript代码将如何显示？

感谢您的帮助！

更新：

显然有一个函数已经运行＆＃34; onchange＆＃34;，所以HTML看起来像这样：

<select name="<select name="country_List" onchange="checkCountry();" id="countries">  
<option value="">––> Select</option>
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">Mexico</option>"
<option value="4">Argentina</option>"
<option value="5">Australia</option>"
</select>

这似乎干扰了本案例建议的代码。有没有办法运行代码来隐藏＆＃34;状态＆＃34;在＆＃34; onchange＆＃34;之后function＆＃34; checkCountry（）＆＃34;已经运行了？

Answer 1

首先你需要验证你的HTML;您错过了结束</select>代码。其次，文本框必须在不需要时禁用，以便在提交表单时不包含在表单数据中。以下内容应符合您的要求：

$('#countries').on('change', function() {
    if( $.trim( this.value ) === '3' ) {
        $('#state').val('').prop('disabled', true).closest('p').hide();
    } else {
        $('#state').prop('disabled', false).closest('p').show();
    }
});

＆＃13;

    $('#countries').on('change', function() {
        if( $.trim( this.value ) === '3' ) {
            $('#state').val('').prop('disabled', true).closest('p').hide();
        } else {
            $('#state').prop('disabled', false).closest('p').show();
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1">USA</option>
<option value="2" selected="">Canada</option>
<option value="3">Rest of the World</option>
</select>
<p><input type="text" name="state_field" value="" id="state"></p>

＆＃13;

<强>更新

这应符合您的最新要求;您只需更新逻辑，以便在if条件中使用最少数量的子句或布尔表达式：

$('#countries').on('change', function() {
    if( $.trim( this.value ) === '2' || $.trim( this.value ) === '1') {
        $('#state').prop('disabled', false).closest('p').show();
    } else {
        $('#state').val('').prop('disabled', true).closest('p').hide();
    }
})
.change();

＆＃13;

    $('#countries').on('change', function() {
        if( ['1','2'].indexOf( this.value ) > -1 ) {
            $('#state').prop('disabled', false).closest('p').show();
        } else {
            $('#state').val('').prop('disabled', true).closest('p').hide();
        }
    })
    .change();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <select name="country_list" id="countries"><option value="">Please select</option>
    <option value="1">USA</option>
    <option value="2" selected="">Canada</option>
    <option value="3">Rest of the World</option>
    </select>
    <p><input type="text" name="state_field" value="" id="state"></p>

＆＃13;

请注意，.change()会在页面加载时触发change事件，因此如果值不是1或2，则文本框将被隐藏。

Answer 2

在javascript中：

<script>
   function show(mode)
   {
       document.getElementById('state').style.visibility = (mode) ? 'visible' : 'hidden';
   }
<script>

<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1" onclick="show(true)">USA</option>
<option value="2" onclick="show(true)">Canada</option>
<option value="3" onclick="show(false)">Rest of the World</option>

<p><input type="text" name="state_field" value="" id="state"></p>

Answer 3

JSFIDDEL

$( "select#countries" )
  .change(function () {
      if($("select#countries option:selected").attr("value")=="3"){
          $("select#countries").hide();
          $("#state").show();
          $("#state").val($("select#countries option:selected").text());
      }else{
          $("#state").hide();
          $("select#countries").show();
          $("#state").val("");
      }
});
$( "#state" )
  .change(function () {
      if($("#state").val()==""){
          $("#state").hide();
          $("select#countries").show();
      }else{
      }
});

JSFIDDEL

Javascript - 如果选择了一个选项，则使元素消失

3 个答案: