Question

急求jquery select选中option后显示相应的内容

网上找了一段代码实现select选中option后显示相应的内容，但是我现在页面有多个select，只有第一个有效
js：
<script type="text/javascript">
(function($){
$.fn.selectTab = function(o){
var d = {
select:'.select', //定义下拉对象
con:'.xs' //定义切换对象
};
var o = $.extend(d,o);
var $option = $(d.select).find('option');//遍历下拉对象下的option
for(var i = 0; i < $option.length; i++){
$option.eq(i).attr('i',i); //设置option 属性i从下标为0开始赋值
}
selectFn();
$(d.select).change(function(){
selectFn();
})
function selectFn(){
var selectedIndex = $(d.select).find('option:selected').attr('i'); //保存被选中的option的属性i的值
$(d.con).eq(selectedIndex).show().siblings(d.con).hide(); //显示对应显示的对象
}
}
})(jQuery);
$(function(){
$().selectTab();
})
</script>
html：
<div class="select-box">
<select name="" class="select">
<option value="" selected="true">选择内容1</option>
<option value="">选择内容2</option>
</select>
<div class="xs"><p>要显示的内容1</p></div>
<div class="xs"> <p>要显示的内容2</p></div>
</div>

<div class="select-box">
<select name="" class="select">
<option value="" selected="true">选择内容1</option>
<option value="">选择内容2</option>
</select>
<div class="xs"><p>要显示的内容1</p></div>
<div class="xs"> <p>要显示的内容2</p></div>
</div>

Answer 1

你搞得复杂了，你会用this么
比如
$(d.select).change(function(){
selectFn(this);//你可以传个this进去
})
function selectFn(_this){
var selectedIndex = $(_this).find('option:selected').attr('i'); //保存被选中的option的属性i的值
$(_this).siblings('.xs').eq(selectedIndex).show().siblings(d.con).hide(); //显示对应显示的对象
}

//你的代码没有细看，不过你如果用上this的话，对象就不会搞错了

追问

js只会简单的toggleClass啊，其他都不懂啊，求告知啊~~~⊙﹏⊙

追答

额，this这东西不是一时半会讲的明白的，你只要明白在这个里面this指的就是你选择的对象本身就行了，所以就不会出现影响其他dom对象的问题