根据选择的选择显示 3 个 div 之一[重复]

Question

我有一个选择框，其中包含 3 个选项主体、强度、距离。我想使用 javascript / jquery 来显示一个 div，具体取决于选择了哪些选项。到目前为止，我刚刚完成了按钮推送http://codepen.io/Irish1/pen/iwKam

html

<form>
  <p>
    <label for="select">
      Goal Type
    </label>
    <select class="typeselect">
      <option value=""></option>
      <option value="body">
        Body
      </option>
      <option value="strength">
        Strength
      </option>
      <option value="distance">
        Distance
      </option>
    </select>
    <button class="toggle">push</button>
  </p>
  <div class="body">
    <p>
      <label for="body">
       Body
      </label>
    </p>
  </div>
  <div class="strength">
    <p>
      <label for="strength">
        Strength
      </label>
    </p>
  </div>
  <div class="distance">
    <p>
      <label for="distance">
       Distance
      </label>
    </p>
  </div>


</form>

css

.body {
  display: none;
}

.strength {
  display: none;
}

.distance {
  display: none;
}

javascript

$('.toggle').click(function(){
  $('.body').toggle();
});

Answer 1

试试

//dom ready handler
jQuery(function () {
    //all the elements that has to be shown/hidden, it is cached for easy access later
    var $targets = $('.body, .strength, .distance');

    //chang handler for the select element
    $('.typeselect').change(function () {
        //hide previously displayed elements
        $targets.hide()

        //find the element with the selected option's value as class, if empty option is selected set it to an empty set
        if (this.value) {
            $('.' + this.value).show()
        }
    })
})

演示：Fiddle

如果你想让按钮处理程序工作，那么

//dom ready handler
jQuery(function () {
    //all the elements that has to be shown/hidden, it is cached for easy access later
    var $targets = $('.body, .strength, .distance');

    var $select = $('.typeselect');

    //click handler for the button
    $('.toggle').click(function (e) {
        //prevent the default form action of the button click
        e.preventDefault();

        //hide previously displayed elements
        $targets.hide()

        //selected value
        var val = $select.val();
        //find the element with the selected option's value as class, if empty option is selected set it to an empty set
        if (val) {
            $('.' + val).show()
        }
    })
})

演示：Fiddle

Answer 2

$('#typeselect').change(function(event) {
   $('.target').hide();
   var option = $(this).val();
   if (option != "") $('.'+option).show();
});

以及对 html 的一些小修改

<form>
  <p>
    <label for="select">Goal Type</label>
    <select id="typeselect" class="typeselect">
      <option value=""></option>
      <option value="body">Body</option>
      <option value="strength">Strength</option>
      <option value="distance">Distance</option>
    </select>
  </p>
  <div class="body target">
    <p><label for="body">Body</label></p>
  </div>
  <div class="strength target">
    <p><label for="strength">Strength</label></p>
  </div>
  <div class="distance target">
    <p><label for="distance">Distance</label></p>
  </div> 
</form>

您可以在 codepen 上查看和编辑：http://codepen.io/anon/pen/ktesh

Answer 3

为 Select 和 Div 指定名称/ID。

var x = document.getElementById("SelectId / Name").selected;

    if(x==0) {
        document.getElementById("body").style.display = "block";
    } else {
        \\ Similarly for other div to display on the basis of x
    }

Answer 4

试试这个：

$('.typeselect').change(function(){
   $('div').hide();
   if($(this).val() == ""){
      $(this).children('option:first-child').show();
   }
   else
      $('.' + $(this).val()).show();
});