Js select option 点击加减选择下一个 或上一个 效果

不限制 多个 select 写法 HTML

<dd>
    <div class="input-box">
<button title="minus" onclick="addSelect('select_44');opConfig.reloadPrice();" class="minus_option">+</button>
        <select name="options[44]" id="select_44" class=" product-custom-option" title="" onchange="opConfig.reloadPrice()">
		<option value="">-- 请选择 --</option><option value="86" price="65.3">10件 +￥&nbsp;65.30</option>
		<option value="87" price="130.6">20件 +￥&nbsp;130.60</option>
		<option value="88" price="195.9">30件 +￥&nbsp;195.90</option>
		</select>
<button title="add" onclick="minusSelect('select_44');opConfig.reloadPrice()" class="add_options">-</button>
		</div>	
</dd>

不限制 多个 select 写法 JS

    /**
     * WeiCot Framework
     * User: ajiang
     * WebSite: WWW.WEICOT.COM
     * Date: 2016/08/11 0006
     * Time: 17:41
     * Select + - 选中效果 JS
     */
    console.log('wwww.weicot.com WF ajing ');


    //提示语言
    var maxErreoMsg='Max  Option';
    var  minusErreoMsg='Minus Option';



    //option  下一个 选项
    function addSelect(id){
        var option=document.getElementById(id);
        var selectId =getSel(option);  //获得选中的 ID
        if(selectId>=0 &&  selectId<=option.length){   //判断 是否大于选项数目
           option.options[selectId+1].selected = 'selected';
            console.log('A=//:'+selectId);
        } else{
            alert(maxErreoMsg);
            console.log('AE=//:'+selectId);
        }
    }


    //option 上一个选项
    function minusSelect(id){
        var options=document.getElementById(id);
        var selectedId=getSel(options)-1;
        if(selectedId>=0 &&  selectedId<options.length){
            console.log('C=//:'+selectedId);
            options.options[selectedId].selected = 'selected';
        }else{
            alert(minusErreoMsg);
            console.log('CE=//:'+selectedId);
        }
    }


    //获得选中的 ID
    function getSel(obj){
        for(var i=0;i<obj.options.length;i++){
            if(obj.options[i].selected){
                console.log('B=//:'+i);
                return i;
            }
        }
    }

单个 Select 情况写法

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<dd>
    <div class="input-box">
<button title="minus" onclick="addSelect('select_44');opConfig.reloadPrice();" class="minus_option">+</button>
        <select name="options[44]" id="select_44" class=" product-custom-option" title="" onchange="opConfig.reloadPrice()">
		<option value="">-- 请选择 --</option><option value="86" price="65.3">10件 +￥&nbsp;65.30</option>
		<option value="87" price="130.6">20件 +￥&nbsp;130.60</option>
		<option value="88" price="195.9">30件 +￥&nbsp;195.90</option>
		</select>
<button title="add" onclick="minusSelect('select_44');opConfig.reloadPrice()" class="add_options">-</button>
		</div>	
</dd>
<script>
/**
     * WeiCot Framework
     * User: ajiang
     * WebSite: WWW.WEICOT.COM
     * Date: 2016/08/11 0006
     * Time: 17:41
     * Select + - 选中效果 JS
     * 不支持多  函数外面那个  selectId 会一直累加 
     */
console.log('wwww.weicot.com WF ajing ');
var selectId=0;


//提示语言
var maxErreoMsg='Max  Option';
var  minusErreoMsg='Minus Option';



//option  下一个 选项
function addSelect(id){
var option=document.getElementById(id);
selectId=selectId+1;
if(selectId<option.length){   //判断 是否大于选项数目
option.options[selectId].setAttribute("selected", true); 
}else{
alert(maxErreoMsg);
}
}


//option 上一个选项
function minusSelect(id){
var options=document.getElementById(id);
 var selectedId=getSel(options)-1;
 if(selectedId>=0 &&  selectedId<options.length){
  console.log('C=//:'+selectedId);
  options.options[selectedId].selected = 'selected'; 
 }else{
 alert(minusErreoMsg);
 }
}


//获得选中的 ID
function getSel(obj){
    for(var i=0;i<obj.options.length;i++){
        if(obj.options[i].selected){
		console.log('D=//:'+i);
            return i;
    }
}
}


</script>

转载请注明：(●--●) Hello.My Weicot » Js select option 点击加减选择下一个 或上一个 效果