如何触发单击按钮上的选择选项？

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>