jquery - 最简单的增加 - 使用 jquery 减少选择区域中的值选项

Question

开头我想说我是jquery的新手。 我想创建一个包含年份的字段。我还想向左和向右制作两个箭头。单击后，他们应该更改我选择字段中的值 - 以增加和减少的方式。每当每个选项内的文本。

我当前的代码准备只是为了向您展示这看起来像:

HTML

    <a href="#" title="">
        <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png" alt="" />
    </a>
    <a href="#" title="">
        <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png" alt="" />
    </a>

    <br />

    <select class="my-select">
        <option selected value="select">2015</option>
        <option>2014</option>
        <option>2013</option>
        <option>2012</option>
    </select>

</div>

CSS

.wrapper {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.my-select {
    width: 200px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #000000;
    text-indent: 30px;
}

fiddle 在这里: http://jsfiddle.net/6uLxp1hx/

Answer 1

1. 简单的 JQuery 方法，用于根据当前选择的值选择按钮单击时的下一个值和按钮单击时的上一个值。

JSFillde

1. 添加了第二种方法来根据第一个/最后一个选项的值显示和隐藏值。

JSFillde 2

1. 根据创建者的要求添加了 DMY 通用版本。 HTML

   <a href="#" id="fieldBefore-Day" title="">
       <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png" alt="" />
   </a>
   <a href="#" id="fieldNext-Day" title="">
       <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png" alt="" />
   </a>
   
   <br />
   
   <select id="selection-Day" class="my-select">
       <option selected value="select">31</option>
       <option>30</option>
       <option>29</option>
       <option>28</option>
   </select>
   

   <a href="#" id="fieldBefore-Month" title="">
       <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png" alt="" />
   </a>
   <a href="#" id="fieldNext-Month" title="">
       <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png" alt="" />
   </a>
   
   <br />
   
   <select id="selection-Month" class="my-select">
       <option selected value="select">12</option>
       <option>11</option>
       <option>10</option>
       <option>9</option>
   </select>
   

   <a href="#" id="fieldBefore-Year" title="">
       <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png" alt="" />
   </a>
   <a href="#" id="fieldNext-Year" title="">
       <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png" alt="" />
   </a>
   
   <br />
   
   <select id="selection-Year" class="my-select">
       <option selected value="select">2015</option>
       <option>2014</option>
       <option>2013</option>
       <option>2012</option>
   </select>
   

JS

function main(value){
    if ( $('#selection-'+value+' option:first').val() == $('#selection-'+value+' option:selected').val() ){
     $('#fieldNext-'+value).hide();
     $('#fieldBefore-'+value).show();
    }else if($('#selection-'+value+' option:last').val() == $('#selection-'+value+' option:selected').val()){
     $('#fieldNext-'+value).show();
     $('#fieldBefore-'+value).hide();
    }else{
     $('#fieldNext-'+value).show();
     $('#fieldBefore-'+value).show();
    }
}

function prev(value){
    $('#selection-'+value+' option:selected').prev().attr('selected', 'selected'); 
    main(value);
}

function next(value){
    $('#selection-'+value+' option:selected').next().attr('selected', 'selected');
    main(value);

}



function generate(value){
    $(document).ready(main(value));
    $('#selection-'+value).on('change', function() {main(value)});
    $('#fieldNext-'+value).on('click', function() {prev(value)});
    $('#fieldBefore-'+value).on('click', function() {next(value)});
}

generate('Day');
generate('Month');
generate('Year');

JSFillde 3