Question

再一次，我遇到了Jquery的麻烦（虽然我现在越来越好了！），我正试图这样做，所以当我更改“”选项卡的选定选项时，它会显示输入与所选选项相关并隐藏所有其他选项。

这是我到目前为止所得到的;

    <script type='text/javascript'>
$(document).ready(
    function()
    {
      $('select').prop("selectedIndex", -1);
      var showSomeClass = $('#placeholder_type').val();
      $('#changling').children().addClass('hidden');
      if($('#changling').children().attr('id') == showSomeClass)
      {
          $(this).removeClass('hidden');
      }
      else
      {
          $(this).addClass('hidden');
      }
    });
</script>

但它并没有完全弄清楚我是怎么想的......我认为这可能与我在这个问题上有所关系，就像PHP而不是Javascript一样。

Answer 1

您可以将.change()事件绑定到<select>元素，例如：

$(document).ready(function() {
    // Hide all #changling children onload
    $('#changling > input').addClass('hidden');

    // Bind change event to <select> element
    $('#placeholder_type').change(function() {

        // Hide everything first
        $('#changling > input').addClass('hidden');

        // And then decide which one to display
        var opt = $('#placeholder_type option:selected').val();
        $('#changling').children('#' + opt).removeClass('hidden');
    });
});

注意：我已经为你的'星'和'船'输入字段添加了一个占位符属性，这样你就可以看到select选项确实显示了相关的输入字段:)

请点击此处更新的小提琴 - http://jsfiddle.net/teddyrised/dFhz5/3/

根据选择值显示/隐藏div

1 个答案: