根据选择框的选择显示元素 [英] Displaying elements based on select box choice

问题描述

IN JS PAGE

<$>

我有一个选择框可隐藏和显示基于其选择的元素。 p $ p> function showhide（）{

$（div.brandDiv）。hide（）;
$（select.slct）。bind（'change'，function（）{
$ b $（'div.brandDiv'）。hide（）;
var targetId = $（this）.val（）;
$（'div＃'+ targetId）.show（）;
}）;



在HTML
中调用函数showhide（）

 < select name =exclass =slct> 
  

然后是div，id为non和yes。

< div id =ouiclass =brandDiv>

 < input type =textname ='num'class =numbersonlymaxlength =2>< / input> 
< / div> 
  

它工作的很好

我刷新页面只显示最后选择选项的选择框，但不包含基于该选择的元素。例如，如果我有2个选择框选项是和不是
如果用户选择yes它显示hello
并且没有它显示by
但是当我刷新页面时它正确显示yes或no但不是hello或者通过

我不是很专业，请帮忙。 链接，如下所示：

演示 http://codebins.com/bin/4ldqp9q

HTML：

 < div id =panel> 
< select name =exclass =slct> 
< option value =div1> 
 Option1 
< / option> 
< option value =div2> 
 Option2 
< / option> 
< option value =div3> 
 Option3 
< / option> 
< / select> 
< div id =div1class =brandDiv> 
以下是品牌Div 1的内容。
< / div> 
< div id =div2class =brandDiv> 
以下是品牌Div 2的内容。
< / div> 
< div id =div3class =brandDiv> 
以下是品牌Div 3的内容。
< / div> 
< / div> 
  

CSS：

  .slct {
 border：1px solid＃442288; 
} 
 .brandDiv {
 border：1px solid＃225599; 
 margin-top：5px; 
 padding：5px; 
背景：＃a4c8ed; 
 height：30px; 
 display：none; 
} 
  

jQuery：

  function showhide（）{
 $（'。brandDiv'）。hide（'fast'）; 
 var targetId = $（select.slct）。val（）; 
 $（'div＃'+ targetId）.show（1000）; 
 
 $（function（）{
 showhide（）; 
 $（select.slct）。bind（'change'，showhide）; 
} ）; 
  

演示： http://codebins.com/bin/4ldqp9q

I have one select box that hides and displays elements based on its selection.

IN JS PAGE

function showhide() {

    $("div.brandDiv").hide();
    $("select.slct").bind('change', function() {

        $('div.brandDiv').hide();
        var targetId = $(this).val();
        $('div#' + targetId).show();
    });
}

IN HTML call to function showhide()

 <select name="ex" class="slct">

and then divs with id non and yes .

< div id="oui" class="brandDiv">

         <input type="text" name='num' class="numbersonly" maxlength="2" ></input>
                </div>

Its working fine

Problem is when I refresh page it just displays select box with lastly selected option but not elements based on that selection

For example if I have 2 select box options yes and no and if user select yes it shows hello and with no it show By but when i refresh page it shows properly yes or no but not hello or by

I am not very expert .Please help.

解决方案

Here i have done complete bins for above issue, once tryout demo link as shown below:

Demo: http://codebins.com/bin/4ldqp9q

HTML:

<div id="panel">
  <select name="ex" class="slct">
    <option value="div1">
      Option1
    </option>
    <option value="div2">
      Option2
    </option>
    <option value="div3">
      Option3
    </option>
  </select>
  <div id="div1" class="brandDiv">
    Here is content for brand Div 1.
  </div>
  <div id="div2" class="brandDiv">
    Here is content for brand Div 2.
  </div>
  <div id="div3" class="brandDiv">
    Here is content for brand Div 3.
  </div>
</div>

CSS:

.slct{
  border:1px solid #442288;
}
.brandDiv{
  border:1px solid #225599;
  margin-top:5px;
  padding:5px;
  background:#a4c8ed;
  height:30px;
  display:none;
}

jQuery:

function showhide() {
    $('.brandDiv').hide('fast');
    var targetId = $("select.slct").val();
    $('div#' + targetId).show(1000);
}
$(function() {
    showhide();
    $("select.slct").bind('change', showhide);
});

Demo: http://codebins.com/bin/4ldqp9q

这篇关于根据选择框的选择显示元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！