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

Question

单击图像时如何更改选择选项的值？我有一个下拉列表，其中填充了数据库中的日期，我也有左右两个图像，因此单击左侧时 - 选择上一个日期，单击右侧时使用列表中的下一个日期。

非常感谢任何帮助:)

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

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

Answer 3

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

这里有一些改进的空间，但这表明了基本思想。使用点击事件处理程序来更改选定的索引。