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

Javascript - Make an element dissapear if an option is selected

本文关键字：元素 消失 选项 如果 选择 Javascript      更新时间：2023-09-26

>我在下拉菜单中列出了国家/地区

<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，输入字段"state"将消失。如果选择选项 1 或 2，则应显示字段"状态"。

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

Javascript代码会是什么样子的？

感谢您的帮助！

更新：

显然，已经有一个函数在运行"onchange"，因此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>

这似乎干扰了为这种情况建议的代码。在运行"onchange"函数"checkCountry（）"后，有没有办法运行代码来隐藏"状态"？

首先，您需要验证您的 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();
    }
});


    $('#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();
        }
    });
<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>

更新

这应该满足你更新的要求;你只需更新逻辑，这样你最终会在 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();


    $('#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();
<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>

请注意，.change() 在页面加载时触发 change 事件，因此如果值不是 1 或 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>

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{
      }
});

吉斯菲德尔

相关文章：