CODEWITHSUNDEEP
javascriptjqueryhtmlcss
CodeName44
CodeName44

Reputation: 49

How to add an up arrow to select element along with down arrow and to traverse options only using these arrows?

I have a select element on which i was able to style it with a up and down arrow. But here I seek your help to traverse the option dropdown only using these arrows. Infact I need that dropdown list to get hide.

Here is the Markup

    <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>

The 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;
}

And it looks something like http://awesomescreenshot.com/0ed3syg0c6

What I need is the jquery to traverse the options on clicking those arrows. Thanks in Advance

Upvotes: 1

Views: 8982

Answers (3)

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

Simply create a custom element that will work as a select element with the features you want. You'll be using the jQuery click event to change the content of your custom select element. Try this way : (It's a demo work. You can style it as you want.)

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

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11859

you can try this:

<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>

see demo here:Fiddle

Upvotes: 1

Abhishek Kasera
Abhishek Kasera

Reputation: 240

Use this code for selectbox

    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)
    }

Upvotes: 0

Related Questions