Question

我选择了一个包含select标签的表单。还有一个没有显示的div。所以我想要的是，如果我选择选项值saab，则应显示div。那么我怎么能这样做。有没有办法通过php或jquery。请帮我解决一下这个。我也试过这个脚本但是失败了。

    <script>
      $(document).ready(function(){
      $('#even').click(function(){
                $('#hqr').fadeIn();
            });
    });
   </script>

这是执行此操作的正确脚本还是有其他技术？

<form action="index1.html#!/registration">
<select>
    <option value="volvo" >Volvo</option>
    <option value="saab" id="even">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi" id="even">Audi</option>
</select>
<div id="hqr" style="width:20%;height:20%;border:solid black thick;display:none;">
</div>
<input type="submit" value="submit">
</form>

Answer 1

元素的ID必须是唯一的，因此您可以使用data-*属性来指示需要显示hqr元素的元素，而不是使用ID。

您还需要收听选择元素更改事件

<form action="index1.html#!/registration">
    <select id="select">
        <option value="volvo">Volvo</option>
        <option value="saab" data-type="even">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi" data-type="even">Audi</option>
    </select>
    <div id="hqr" style="width:20%;height:20%;border:solid black thick;display:none;"></div>
    <input type="submit" value="submit" />
</form>

然后

$(document).ready(function () {
    $('#select').change(function () {
        if ($(this).find('option:selected').is('[data-type="even"]')) {
            $('#hqr').fadeIn();
        } else {
            $('#hqr').fadeOut();
        }
    }).change();
});

演示：Fiddle

如果您希望在选项的奇数/事件位置上显示hqr元素，那么您可以使用:nth-child(even)选择器代替data-type="even"

来使用更简单的解决方案

<form action="index1.html#!/registration">
    <select id="select">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
    <div id="hqr" style="width:20%;height:20%;border:solid black thick;display:none;"></div>
    <input type="submit" value="submit" />
</form>

然后

$(document).ready(function () {
    $('#select').change(function () {
        if ($(this).find('option:selected').is(':nth-child(even)')) {
            $('#hqr').fadeIn();
        } else {
            $('#hqr').fadeOut();
        }
    }).change();
});

演示：Fiddle

Answer 2

而不是id =“even”使用class =“even”

你的js必须像这样

<script>
      $(document).ready(function(){
      $('.even').click(function(){
            $('#hqr').fadeIn();
        });
      });
</script>

显示内部表单元素

2 个答案: