每次使用jquery selectmenu选择不同的项目时,如何添加要调用的内容?到目前为止,我已经编写了以下代码,并希望添加该调用。
get_category('my category);
我想为每个提供的选项提供动态内容。如果有人选择商家,则应显示有关商家的信息,并显示其他信息。
答案 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;