Question

如何在选择C时显示form_input并在选择A，B，D时隐藏
下次选择C时，那个时间也是form_input隐藏。即假设第一次选择C然后它将显示form_input但是seconf时间被选中C然后它将隐藏form_input。

任何人都可以告诉你如何做到这一点。

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="pm">
  <select name="pay">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</div>

<form class="form_input">
<input type="text" placeholder="write something"/>
</form>

<script>
$('.pm').on('change', "select[name='pay']", function(ev) {
    if($(ev.currentTarget.selectedOptions).text()=== "C"){
        $("#form_input").show();
    }
    else{
    $("#form_input").hide();
    }
});
</script>
</body>
</html>

Answer 1

＆＃13;

 var firstTime = true;

        $('.pm').on('change', "select[name='pay']", function (ev) {
            if ($(ev.currentTarget.selectedOptions).text() === "C" && firstTime == true) {
                console.clear();
                console.log("C is printed");
                $('#theInput').css("display", "block");
                firstTime = false;
            }
            else {
               // ev.empty();
                $('#theInput').css("display", "none");
            }
        });

＆＃13;

<!DOCTYPE html>
<html>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <div class="pm">
        <select name="pay">
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
        </select>
    </div>

    <form class="form_input">
        <input type="text" id="theInput" placeholder="write something" style="display:none;"/>
    </form>


</body>

</html>

＆＃13;

Answer 2

您可以使用属性来了解是否已显示C选项。检查此代码段。修改

＆＃13;

$('.form_input').hide();
$('.pm').on('change', "select[name='pay']", function(ev) {
    if($(ev.currentTarget.selectedOptions).text()=== "C"){
        console.clear();
        
        
        if ($(this).attr('shown')) {
          $('.form_input').hide();
        } else{
          $('.form_input').show();
         console.log("C is printed");
         $(this).attr('shown', true);
        }
        
    }
    else{
      $('.form_input').hide();
    }
});

＆＃13;

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="pm">
  <select name="pay">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</div>

<form class="form_input">
<input type="text" placeholder="write something"/>
</form>


</body>
</html>

＆＃13;

Answer 3

您使用了错误的选择器，使用.代替#，因为表单具有类form_input而不是ID。无论如何，您需要跟踪C的选择，尝试此示例

＆＃13;

$(function() {
  var countOfC = 0;
  $('select[name=pay]').on('change', function() {
    console.log('selected', this.value);
    $('form.form_input').hide();
    if ('C' === this.value) {
      countOfC++;
      if (1 === countOfC) {
        $('form.form_input').show();
      } else {
        console.log('selected before, hence not shown');
      }
    }
  }).trigger('change'); /* page load trigger */
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="pm">
  <select name="pay">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</div>

<form class="form_input">
  <input type="text" placeholder="write something" />
</form>

＆＃13;

Answer 4

我就是这样做的。

绑定点击事件，以便您可以查看每次选择的值是否更改时选择的内容。因此，如果用户选择C然后再选择C

，您就可以处理它

var flag = true;
$('select[name="pay"]').on('click',function(ev){
    if(ev.offsetY < 0){
      if(['A','B','D'].indexOf($("select[name='pay'] :selected").text()) >= 0){
     $('.input').hide();
   }
   if($("select[name='pay'] :selected").text() ==='C' && flag ){
      $('.input').show();
       
      flag = false;
   } else{
   $('.input').hide();
   } 
    }else{
      
    }
});

.input{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="pm">
  <select name="pay">
    <option class="options">A</option>
    <option class="options">B</option>
    <option class="options">C</option>
    <option class="options">D</option>
  </select>
</div>

<form class="form_input">
<input type="text" class="input" placeholder="write something"/>
</form>
 
</body>
</html>

在第一次选择时显示下拉项目并在第二次选择相同项目时隐藏

4 个答案: