ボタンクリックで選択オプションをトリガする方法は？

Question

私はセットアップ条件を持っている今のところ、誰かが選択オプションボタン

<td class="total"> 
<a class="im-pricebutton has-hover" href="javascript://;" value="A 2 night booking condition applies to this period"> 
<span class="book im-pricebutton-label">Min 2 nights</span> 
<span class="number im-pricebutton-amount">$0</span> 
</a></td> 

ためのコードの下に使用

<div class="period" title="Choose a number of nights"> 
<span class="label">Nights</span> 
<span class="input"> 
<select rel="period" value="4"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
</select></span></div> 

ためのコードの下に使用してボタンをクリックしながら/選択オプションを開くトリガーすることができたいくつかのJavaScriptを望みます最小夜の選択は3,5,10として非常に製品上にあるので、誰かがこの夜の機能を渡さないと、最小夜を選択するコードの上に表示されますが、自動的にドロップダウンを開くことができるカスタムJavaScriptを渡す方法彼らはボタンをクリックします。

Answer 1

私は、コードの下に使用して値を切り替えるにはどのような方法を発見しました。だから、誰かがボタンをクリックすると最小の夜間値をとります。この場合は2です。したがって、動的に値を供給しています。

$('.period select').val(2).trigger('change'); 

ご協力いただきありがとうございます。

Answer 2

あなたの選択にIDを入れてみてください。 select id="selectbox"このスクリプトを追加してください。

の作業フィドル：オープン関数のEG.arteezyにhttp://jsfiddle.net/X2rAZ/4/

var button = document.querySelector('.im-pricebutton'), 
 
    sel = document.getElementById('selectbox'); 
 

 
button.onclick = function(){ 
 
    open(sel); 
 
} 
 

 
function open(elem) { 
 
    if (document.createEvent) { 
 
     var e = document.createEvent("MouseEvents"); 
 
     e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
 
     elem[0].dispatchEvent(e); 
 
    } else if (element.fireEvent) { 
 
     elem[0].fireEvent("onmousedown"); 
 
    } 
 
}

<div class="period" title="Choose a number of nights"> 
 
<span class="label">Nights</span> 
 
<span class="input"> 
 
<select rel="period" select id="selectbox"> 
 
<option value="1">1</option> 
 
<option value="2">2</option> 
 
<option value="3">3</option> 
 
<option value="4">4</option> 
 
<option value="5">5</option> 
 
<option value="6">6</option> 
 
<option value="7">7</option> 
 
<option value="8">8</option> 
 
<option value="9">9</option> 
 
<option value="10">10</option> 
 
</select></span></div> 
 
<br/><br/> 
 
<br/><br/> 
 
<br/><br/> 
 
<td class="total"> 
 
<a class="im-pricebutton has-hover" href="javascript://;" value="A 2 night booking condition applies to this period"> 
 
<span class="book im-pricebutton-label">Min 2 nights</span> 
 
<span class="number im-pricebutton-amount">$0</span> 
 
</a></td>

• クレジット。

Answer 3

このような機能はありますか？ 残りのコードはどのようなものか分かりませんので、私は自分のサンプルを作りました。 以下にスニペットを追加しました。

 $(document).ready(function() { 
 
      $('.total').click(function() { 
 
       $('.period').css("display", "inline-block").slideDown(); 
 
      }) 
 
     });

 td{ 
 
      padding: 10px; 
 
     } 
 
     .period { 
 
      display: none; 
 
      -moz-box-sizing: border-box; 
 
      -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<table> 
 
    <tr> 
 
     <td></td> 
 

 
     <td class="total"> 
 
      <a class="im-pricebutton has-hover" href="javascript://;" value="A 2 night booking condition applies to this period"> 
 
       <span class="book im-pricebutton-label">Min 2 nights</span> 
 
       <span class="number im-pricebutton-amount">$0</span> 
 
      </a> 
 
     </td> 
 

 
     <td> 
 
     </td> 
 
    </tr> 
 
</table> 
 
<div class="period" title="Choose a number of nights"> 
 
    <span class="label">Nights</span> 
 
    <span class="input"> 
 
     <select rel="period" value="4"> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
      <option value="4">4</option> 
 
      <option value="5">5</option> 
 
      <option value="6">6</option> 
 
      <option value="7">7</option> 
 
      <option value="8">8</option> 
 
      <option value="9">9</option> 
 
      <option value="10">10</option> 
 
     </select> 
 
    </span> 
 
</div>