I want some JavaScript which can trigger/open select option while someone click on button using below code for select option

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

Using below code for button

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

As of now I have setup condition of Minimum night select as a 3,5 and 10 it's very on products so when someone don't pass this night function it'll show above code to select minimum night but how to pass some custom JavaScript which can open up drop down automatically when they click on button.

I want some JavaScript which can trigger/open select option while someone click on button using below code for select option

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

Using below code for button

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

As of now I have setup condition of Minimum night select as a 3,5 and 10 it's very on products so when someone don't pass this night function it'll show above code to select minimum night but how to pass some custom JavaScript which can open up drop down automatically when they click on button.

• javascript
• jquery
• html
• css
• selector

• use label for that, – mmativ Commented Sep 28, 2016 at 3:20
• Did you really need 31 options in your sample html? – nnnnnn Commented Sep 28, 2016 at 3:32
• @nnnnnn : updated :p – Group Of Oceninfo Commented Sep 28, 2016 at 3:42
• To be clear, the select code will reside inside the <td class="total"> also? – nocturns2 Commented Sep 28, 2016 at 4:17
• Then, if they click on the offer inside the <td>'s link, you want to replace the offer or include the select option below it? – nocturns2 Commented Sep 28, 2016 at 4:20

3 Answers 3

I have found the way how to switch the value using below code. So, when someone click on button it'll take minimum night value, in this case it's 2. So, it's supplying value dynamically.

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

Thanks for your suggestion and help.

Try to put ID on your select. select id="selectbox" and add this script.

Working fiddle: http://jsfiddle/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>

• credits to EG.arteezy for open function.

Would something like this work for you? I don't know what the rest of your code looks like, so I made up my own sample. I've added a snippet below.

        $(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./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>