Question

我有一个选择元素，我可以使用向上和向下箭头设置它。但在这里，我寻求你的帮助，只使用这些箭头遍历选项下拉列表。事实上我需要下拉列表来隐藏。

这是标记

    <div class="select_wrap">
       <div class="select_arow_wrap">
          <span id="select-up" class="select-up"></span>
          <span id="select-down" class="select-down"></span>
       </div>
       <div class="select_bg">
           <select id="select">
               <option value="Newzealand">Newzealand</option>
               <option value="India">India</option>
               <option value="United States">United States</option>
               <option value="United Kingdom">United Kingdom</option>
           </select>
       </div>
    </div>

CSS

    .select_bg { 
background-image:url(../images/select-bg.png); 
background-repeat:repeat-x; 
border:1px solid #dddedf; 
background-position:left center; 
background-color:transparent; 
width:100%; 
border-radius:5px; 
padding:5px; 
height:33px;
}

 .select_wrap { 
position:relative; 
float:left; 
width:100%; 
overflow:hidden;
margin:5px;
}
.form_wrap form select { 
background-color:transparent; 
width:105%; 
padding:3px; 
top:0; 
position:absolute;
-moz-appearance:none;
-webkit-appearance: none;
appearance: none;
margin:0;
height:30px;

}

.form_wrap form select option {
display:none;   
}
.form_wrap form select::-ms-expand {
display: none;
}
.select_arow_wrap { 
border-left:1px solid #dddedf; 
float:left;
position:absolute;
width:16px;
height:30px;
right:5px;
top:2px;
padding:2px;
z-index:999;
}
.select-up,
.select-down{   
background-repeat:no-repeat;
float:left;
width:14px;
height:13px;
cursor:pointer;
}

.select-up { 
background-image:url(../images/select_up_arw.png); 
right:-10px; 
top:6px;
}
.select_wrap .select-down { 
background-image:url(../images/select_dnw_arw.png); 
right:-9px; 
bottom:8px;
}

它看起来像 http://awesomescreenshot.com/0ed3syg0c6

我需要的是jquery遍历点击这些箭头的选项。在此先感谢

Answer 1

只需创建一个自定义元素，它将作为具有所需功能的 select 元素。您将使用jQuery click 事件来更改自定义选择元素的内容。试试这种方式:(这是一个演示工作。你可以根据需要设计它。）

HTML：

<div id="customSelectElement">
    <div id="selectBox">
        <input type="text" id="selector" readonly />
    </div>
    <div id="navigator">
        <img id="upArrow" src="http://www.clker.com/cliparts/8/7/Y/H/W/e/up-arrow-circle-hi.png" style="float : top" />
        <img id="downArrow" src="http://www.clker.com/cliparts/y/m/X/o/s/R/down-arrow-circle-hi.png" style="float : bottom" />
    </div>
</div>

jQuery：

var data = ["Dubai", "Qatar", "Thiland"];
var counter = 0;
var currentElement = data[counter];
$("#selector").val(currentElement);


$("#upArrow").on("click", function(){
    if(counter > 0){
        counter--;
    }
    setData(counter);
});

$("#downArrow").on("click", function(){
    if(counter < data.length - 1){
        counter++;
    }
    setData(counter);
});

function setData(counter){
    currentElement = data[counter];
    $("#selector").val(currentElement);
}

jsFiddle

Answer 2

你可以试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<style>

  img{
    width : 20px;
    height : 20px;
}

  </style>
<script>

$(document).ready(function(){
    var nextListitem;
        var noOfListItems = $("#select > option").length-1;
        var curListItem = $("#select")[0].selectedIndex;
        $("#upArrow").on("click", function(){
            //alert(noOfListItems);
             // Decrement the selection by one, unless that will be less than zero, then go to the last option
            nextListitem = (curListItem-1 < 0) ? noOfListItems : curListItem-1;
          //  alert(nextListitem);
            curListItem = nextListitem;
            $("#select")[0].selectedIndex = nextListitem;
        });
        $("#downArrow").on("click", function(){
          //  alert(noOfListItems);
             // Increment the selection by one, unless that will be more than the number of options, then go to the first option
           nextListitem = (curListItem+1 > noOfListItems) ? 0 : curListItem+1;
         //   alert(nextListitem);
            curListItem = nextListitem;
            $("#select")[0].selectedIndex = nextListitem;
        });



});


  </script>
<body>
 <div class="select_wrap">
       <div class="select_arow_wrap">
          <span id="select-up" class="select-up"></span>
          <span id="select-down" class="select-down"></span>
       </div>
       <div class="select_bg">
           <select id="select">
               <option value="Newzealand">Newzealand</option>
               <option value="India">India</option>
               <option value="United States">United States</option>
               <option value="United Kingdom">United Kingdom</option>
           </select>

        <img id="upArrow" src="http://www.clker.com/cliparts/8/7/Y/H/W/e/up-arrow-circle-hi.png" style="float : top" />
        <img id="downArrow" src="http://www.clker.com/cliparts/y/m/X/o/s/R/down-arrow-circle-hi.png" style="float : bottom" />

       </div>
    </div>

</body>
</html>

在此处查看演示：Fiddle

Answer 3

将此代码用于选择框

    var data = new Array();
    $("#select option").each(function(){
        data.push($(this).val());
    });
    var counter = 0;
    var currentElement = data[counter];


    $("#select-up").on("click", function(){
        if(counter > 0){
            counter--;
        }
        selectData(counter);
    });

    $("#select-down").on("click", function(){
        if(counter < data.length - 1){
            counter++;
        }
        selectData(counter);
    });

    function selectData(counter){
        currentElement = data[counter];
        console.log(currentElement);
        //$('#selector option[value="'+currentElement+'"]').attr("selected",true);
        $('#select').val(currentElement)
    }

如何添加向上箭头以选择元素以及向下箭头并仅使用这些箭头遍历选项？

3 个答案: