如何觸發單擊按鈕上的選擇選項？

Question

我想一些JavaScript可以觸發/打開時，選擇選項，而有人在按鈕點擊使用下面的代碼選擇選項

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

使用下面的代碼鍵

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

截至目前我已經安裝條件最小夜選擇3,5和10它是非常的產品，所以當有人不通過這個夜晚的功能，它會顯示上面的代碼選擇最小的夜晚，但如何通過一些自定義的JavaScript，可以打開自動下拉時他們點擊按鈕。

Answer 1

我已經找到了辦法如何切換使用下面的代碼值。所以，當有人點擊按鈕時，它會獲得最低的夜間價值，在這種情況下，它是2.所以，它動態地提供價值。

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

感謝您的建議和幫助。

Answer 2

試着把ID放在你的選擇上。 select id="selectbox"並添加此腳本。

工作小提琴：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>

• 學分EG.arteezy開放功能。

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>