Question

如何在<select> HTML标记中选择要由JQUERY处理的值，当clicked或chosen指定的div显示时，其余的div将是隐藏。

我只展示了3个，但还有10个选择。

<select id="category">
<option value="" disabled="disabled" selected="selected">Please select a category</option>
<option name="choice1" value="pie">   Pie  </option>
<option name="choice2" value="cake">  Cake </option>
<option name="choice2" value="candy"> Candy </option>

</select>

Hidden Divs

<div id="divPie" class="food">
<p> this is pie </p>
</div>

<div id="divCake" class="food">
<p> this is pie </p>
</div>

<div id="divCandy" class="food">
<p> this is pie </p>
</div>

就是这样......

if $('#category').val("pie"); {
    //then show divpie
}
else {
     //hide the other divs
 }

Answer 1

试试这个：

$("#category").on('change',function (

  $("div.food").hide( );

  var _lower=$(this).val();
  var _value=_lower.charAt(0).toUpperCase() + _lower.slice(1); //just noticed that there is a uppercase char there...
  $("#div"+_value).show()


)});

P.S。我不知道默认情况下是否所有这些FOOD div都被隐藏了，但如果他们不这样添加它：

（通过css）

div.food
{
  display:none;
}

（或由Js）

 $("div.food").hide();

Answer 2

你去了

$('#category').change(function () {
    // Get the value of the dropdown
    var value = this.value;

    // Convert the first char to uppercase
    value = value.substr(0,1).toUpperCase() + value.substr(1, value.length);
    // Hide all food divs
    $('.food').hide();
    $('#div'+ value).show();
});

<强> Check Fiddle

Answer 3

您可以使用：

$('#category').on('change', function () {
    $('div.food').hide();
    var val = $('#category option:selected').text();
    console.log(val);
    $('#div' + val).show();
});

<强> DEMO HERE

<强> HTML

<div id="divPie" class="food">
    <p>this is pie</p>
</div>
<div id="divCake" class="food">
    <p>this is cake</p>
</div>
<div id="divCandy" class="food">
    <p>this is candy</p>
</div>

我在你的div / html中添加了CSS，以便它们隐藏在页面加载中。

div.food
{
  display:none;
}

或通过jQuery $('div.food').hide();

Answer 4

<select id="category">
<option value="" disabled="disabled" selected="selected" onchange="hideshow(this)">Please select a category</option>
<option name="choice1" value="divPie">   Pie  </option>
<option name="choice2" value="divCake">  Cake </option>
<option name="choice2" value="divCake"> Candy </option>

</select>

所有div都隐藏，因为当用户选择元素时，div会显示

<div id="divPie" class="food" style="display:none">
<p> this is pie </p>
</div>

<div id="divCake" class="food" style="display:none">
<p> this is pie </p>
</div>

<div id="divCandy" class="food" style="display:none">
<p> this is pie </p>
</div>

这是javascript代码，当用户从div

中选择值时显示div

<script>
function hideshow(divval)
{
    $("#"+divval).show();
}
</script>

如果您有任何问题，请告诉我这不是经过测试的脚本，但我认为这有效

Answer 5

HTML

<select id="category">
<option value="" disabled="disabled" selected="selected">Please select a    category</option>
<option name="choice1" value="pie">   Pie  </option>
<option name="choice2" value="cake">  Cake </option>
<option name="choice2" value="candy"> Candy </option>
</select>
<div id="divpie" class="food">
<p> this is pie </p>
</div>
<div id="divcake" class="food">
<p> this is cake </p>
</div>
<div id="divcandy" class="food">
<p> this is candy </p>
</div>

JS

$(function(){
  $(".food").hide();
    $("#category").change(function(){
        $(".food").hide();
        $("#div" + $(this).val()).show();
    });
 });

看到它的实际效果：

JSFiddle

Answer 6

在选择框上放置一个更改处理程序，并隐藏所有food除了所选的一个：

$('#category').change(function(){
  switch ($(this).val())
  {
    var div;
    case 'pie':
      div = 'divPie';
      break;
    case 'cake':
      div = 'divCake';
      break;
    case 'candy':
      div = 'divCandy';
      break;
    $('.food').hide();
    $(div).show();
  }
});

Answer 7

我认为你正在寻找这样的东西。

<select id='category'>
  <option value='test1'>Test 1</option>
  <option value='test2'>Test 2</option>
</select>

<div id='test1'>
  Content Here
</div>

<div id='test2'>
  Content Here
</div>

你可能会做这样的事情。

//Hide All Divs
$('div').hide();

//Get the Currently Selected Item
var selected = $('#category').val();
//Show the selected one.
$('#'+selected).show();

Answer 8

试试这个：

HTML：

<select id="category" onchange='display();'>
    <option value="" disabled="disabled" selected="selected">Please select a category</option>
    <option name="choice1" value="pie">Pie</option>
    <option name="choice2" value="cake">Cake</option>
    <option name="choice2" value="candy">Candy</option>
</select>


<div id="divPie" class="food" style="display:none;">
    <p>this is pie</p>
</div>
<div id="divCake" class="food" style="display:none;">
    <p>this is cake</p>
</div>
<div id="divCandy" class="food" style="display:none;">
    <p>this is candy</p>
</div>

jQuery的：

function display(){
 var select=$('#category').val();
 if(select!=''){
  var divblock='div'+select;
  $(".food").hide();
  $('#'+divblock).css('display','block');
 }
}

您也可以使用$('#'+divblock).show();代替$('#'+divblock).css('display','block');

在JQuery </select>中为<select> HTML标记创建条件语句

8 个答案: