单击图像时更改下拉选择的值

Question

How do you change the value of a select option when an image is clicked? I have a drop down list populated with dates from a database also I have two images left and right, so when left is clicked - select previous date, when right is clicked use next date in the list.

Any help much appreciated :)

Answer 1

Setting the id of the populated drop down list to be "ddl", and the onClick events for the images to the corresponding functions, this Javascript should do it:

var ddl =  document.getElementById("ddl");

function leftImageClicked(){
    if(ddl.selectedIndex > 0) ddl.selectedIndex -= 1;
}

function rightImageClicked(){
    if(ddl.selectedIndex < ddl.length - 1) ddl.selectedIndex += 1;
}

Answer 2

<script>
    function changeDate(option){
       var selectList = document.getElementById("list");
       if(option == 0){
           selectList.selectedIndex++;
       }else if (option == 1 && selectList.selectedIndex > 0){
           selectList.selectedIndex--;
       }
    }
</script>


<img src="img1.jpg" onclick="changeDate(0)"> 
<img src="img2.jpg" onclick="changeDate(1)"> 
    <select id="list">
        <option id="1">One</option>
        <option id="2">Two</option>
        <option id="3">three</option>
        <option id="4">Four</option>
    </select> 

There is room for some improvement here, but this shows the basic idea. Use an on click event handler to change the selected index.

Answer 3

Fully functional example created in JSFiddle: http://jsfiddle.net/whizkid747/eDfZ5/

<div>

    <img src="http://icons.iconarchive.com/icons/deleket/button/48/Button-Previous-icon.png" id="img-left-arrow" height="20px" on/> 


    <select>
        <option value="12/1/2013">12/1/2013</option>
  <option value="12/1/2014">12/1/2014</option>
  <option value="12/1/2015">12/1/2015</option>
  <option value="12/1/2016">12/1/2016</option>
</select>    
        <img src="http://icons.iconarchive.com/icons/deleket/button/48/Button-Next-icon.png" id="img-right-arrow" height="20px"/> 


</div>

<script>
    $('#img-right-arrow').on('click', function() {
    $('select option:selected').next().prop('selected', true) });

$('#img-left-arrow').on('click', function() {
    $('select option:selected').prev().prop('selected', true) }); 

<script>