jQuery selectmenu并显示所选菜单的内容

时间:2016-11-15 07:55:48

标签: javascript jquery html

每次使用jquery selectmenu选择不同的项目时,如何添加要调用的内容?到目前为止,我已经编写了以下代码,并希望添加该调用。

get_category('my category);

我想为每个提供的选项提供动态内容。如果有人选择商家,则应显示有关商家的信息,并显示其他信息。

1 个答案:

答案 0 :(得分:1)

这是解决方案:



$( function() {
  $('#Business').hide();
  $('#School').hide();
  $('#Medium').hide();
  $( "#category" ).selectmenu();
  $('#category').change(function(){
        var value=$(this).val(); 
  	$('.information').empty().append(($('#'+value).html()));
  });
} );

fieldset {
  border: 0;
}
label {
  display: block;
  margin: 30px 0 0 0;
}
.overflow {
  height: 200px;
}
select{
  width:300px;
}
.information{
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.theme.css" rel="stylesheet"/>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css" rel="stylesheet"/>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.core.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>

<div class="demo">
  <form action="#">
    <fieldset>
      <label for="preference">Pick a category</label>
      <select name="category" id="category">
        <option value="" disabled selected>Select your option</option>
        <option>Business</option>
        <option>School</option>
        <option>Medium</option>
      </select>
    </fieldset>
  </form>
  <br>
  <div class="information">

  </div>
  <div id="Business">
    Content of bussinesss<br>
  </div>
  <div id="School">
    Content of school<br>
  </div>
  <div id="Medium">
    Content of medium<br>
  </div>
</div>
&#13;
&#13;
&#13;

jsFiddle