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

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

只需创建一个自定义元素即可用作具有所需功能的选择元素。 您将使用jQuery click事件更改自定义select元素的内容。 尝试这种方式：（这是一个演示工作。您可以根据需要对其进行样式设置。）

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>

观看演示 ： 小提琴

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 个解决方案

解决方案1
1 2014-11-07 06:45:07

解决方案2
1 已采纳 2014-11-07 07:31:30

解决方案3
0 2014-11-07 07:27:15

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

问题描述

3 个解决方案

解决方案1 1 2014-11-07 06:45:07

解决方案2 1 已采纳 2014-11-07 07:31:30

解决方案3 0 2014-11-07 07:27:15

解决方案1
1 2014-11-07 06:45:07

解决方案2
1 已采纳 2014-11-07 07:31:30

解决方案3
0 2014-11-07 07:27:15