使用 jquery 更改带有 <select> 选项的 <div> 的属性答案

【问题标题】：Change the properties of a <div> with <select> options with jquery使用 jquery 更改带有 <select> 选项的 <div> 的属性
【发布时间】：2012-09-20 19:15:55
【问题描述】：

我想根据下拉菜单中选择的选项更改 div 的可见性，我认为这样的方法会起作用

<select>
<option onclick="hideButton();" value="A">A</option>
<option onclick="showButton();" value="B">B</option>
<option onclick="showButton();" value="C">C</option>
</select>

我有一个按钮想要更改其可见性

<input class="button" name="button" type="submit" value="delete" />

<script type="text/javascript"> 
function hideButton(){$(".button").hide("slow");}
function showButton(){$(".button").show("slow");} 
</script>

当然它什么也没做，我不知道为什么，我认为这个理论是合理的，但我对 jquery 了解不够

【问题讨论】：

<div> 或 <input ... />?。 $(".button").hide("slow");

标签： jquery forms select option

【解决方案1】：

试试这个：

  $('select').change(function(){
    if($(this).val() == 'A'){
      hideButton();
    }else{
      showButton();
    }
  })

【讨论】：

【解决方案2】：

Check FIDDLE

    $(function() {
        $('select').on('change', function() {

            if ($(this).val() == 'A') {
                $('.button').hide('slow');
            }
            else {
                $('.button').show('slow');
            }
        }).change();
    });

<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<input class="button" name="button" type="submit" value="delete" />

【讨论】：

【解决方案3】：

您可以决定必须采取的option：

HTML：

<select>
   <option data-visibility="hide" value="A">A</option>
   <option data-visibility="show" value="B">B</option>
   <option data-visibility="show" value="C">C</option>
</select>

Js（jQuery）：

$('select').bind('change', function(event) {

    var method = $(this).find('option:selected').data('visibility');
    $('.button')[method]('slow');

});

【讨论】：