버튼 클릭시 선택 옵션을 트리거하는 방법은 무엇입니까?

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> 

에 대한 코드 아래 사용 버튼을 클릭하면서 열기/선택 옵션을 실행할 수있는 몇 가지 자바 스크립트를 원한다 최소 야간 선택은 3,5 및 10으로 매우 제품에 적용됩니다. 누군가가 야간 기능을 통과하지 못하면 최소 야간을 선택하는 코드 위에 표시되지만 자동으로 드롭 다운을 열 수있는 맞춤 자바 스크립트를 전달하는 방법 그들은 버튼을 클릭합니다.

Answer 1

어떻게 코드 아래 사용하여 값을 전환하는 방법을 발견했다. 그래서 누군가가 버튼을 클릭하면 최소 야간 값을받습니다.이 경우 2입니다. 따라서 동적으로 값을 제공합니다.

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

귀하의 제안과 도움에 감사드립니다.

Answer 2

은 당신의 선택에 ID를 넣어보십시오. select id="selectbox"을 입력하고이 스크립트를 추가하십시오.

근무 바이올린 : open 함수에 대한 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>