php - 画像がクリックされたときにドロップダウン選択の値を変更する

Question

画像がクリックされたときに選択オプションの値を変更するにはどうすればよいですか? データベースからの日付が入力されたドロップダウンリストがあり、左右に2つの画像があるため、左をクリックすると前の日付を選択し、右をクリックするとリストの次の日付を使用します。

どんな助けでも大歓迎です:)

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> 

ここには改善の余地がありますが、これは基本的な考え方を示しています。クリック時のイベント ハンドラーを使用して、選択したインデックスを変更します。

Answer 3

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>