selectドロップダウンからのjquery関数のトリガー

Question

これは本当に簡単ですが、過去3時間、円で回っています...私はSELECTのIDをjquery関数のIDに合わせて変更する必要があることを知っていますしかし、もう一つのステップがあります（明らかに）私は行方不明です。

私はjqueryui datepickerを使用しています。「入力」フィールドがクリックされたときではなく、「選択」ドロップダウンで特定の値が選択されたときにポップアップします。ここでのコードは、あなたの助けを事前に感謝です：

<SELECT id=""> 
     <option value="1">TODAY</option> 
     <option value="2">TOMORROW</option> 
     <option selected value="3">THIS WEEK</option> 
     <option value="4">NEXT WEEK</option> 
     <option value="5">THIS MONTH</option> 
     <option value="6">NEXT MONTH</option> 
     <option value="7">CALENDAR SHOULD POP UP WHEN THIS OPTION IS SELECTED</option> 
    </SELECT> 

<input type="text" id="datepicker" value="INSTEAD OF THIS"> 

    <script> 
    $(function() { 
    $("#datepicker").datepicker({ 
     minDate: 0, maxDate: "+2Y" 
    }); 
    }); 
    </script> 

Answer 1

確かに、あなたはselect要素に変更ハンドラをバインドし、同じようdatepicker's show methodをトリガすることができます

$('select').change(function() { 
    if ($(this).val() == 7) { 
    $("#datepicker").datepicker("show") 
    } 
}) 

jsFiddle example

Answer 2

はい、あなたはこのようなことをすることができます。 switch()は、ドロップダウンで特定のオプションが選択されたときに何をすべきかを特定するのに役立ち、その結果を.datepicker()に伝えることができます。

$(function() { 
 
    $("#datepicker").datepicker({ 
 
    minDate: 0, 
 
    maxDate: "+2Y" 
 
    }).hide(); 
 
    $("#select-date").change(function(e) { 
 
    if ($(this).val() == "7") { 
 
     $("#datepicker").show().datepicker("show"); 
 
    } else { 
 
     $("#datepicker").datepicker("hide").hide(); 
 
    } 
 
    }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<SELECT id="select-date"> 
 
    <option value="1">TODAY</option> 
 
    <option value="2">TOMORROW</option> 
 
    <option selected value="3">THIS WEEK</option> 
 
    <option value="4">NEXT WEEK</option> 
 
    <option value="5">THIS MONTH</option> 
 
    <option value="6">NEXT MONTH</option> 
 
    <option value="7">CALENDAR</option> 
 
</SELECT> 
 
<input type="text" id="datepicker">

あなたが興味を持っていた場合は今、あなたはまた、コンボボックスまたは分割ボタンでこれを行うことができます。より多くのサイトに適合するために、あなたが考えることがあります。

$(function() { 
 
    var $datepick = $("#datepicker"), 
 
    $opt7 = $("#select-date option[value='7']"); 
 
    $datepick.datepicker({ 
 
    minDate: 0, 
 
    maxDate: "+2Y", 
 
    onSelect: function(sDate, dObj) { 
 
     $opt7.html(sDate); 
 
     $datepick.hide(); 
 
    } 
 
    }).hide(); 
 
    $opt7.click(function(e) { 
 
    $datepick.show().position({ 
 
     my: "left top", 
 
     at: "right top", 
 
     of: $("#select-date") 
 
    }); 
 
    }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<SELECT id="select-date"> 
 
     <option value="1">TODAY</option> 
 
     <option value="2">TOMORROW</option> 
 
     <option selected value="3">THIS WEEK</option> 
 
     <option value="4">NEXT WEEK</option> 
 
     <option value="5">THIS MONTH</option> 
 
     <option value="6">NEXT MONTH</option> 
 
     <option value="7">CHOOSE DATE</option> 
 
    </SELECT> 
 
<div id="datepicker"></div>