How to trigger select option on button click?

Question

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.

To be clear, the select code will reside inside the <td class="total"> also? — nocturns2
– 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
– nocturns2, Commented Sep 28, 2016 at 4:20

halfer · Accepted Answer · 2016-11-28 23:31:14Z

2

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.

edited Nov 28, 2016 at 23:31

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Sep 29, 2016 at 23:12

Group Of Oceninfo

3582 gold badges3 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 1 · Accepted Answer · 2016-09-28 04:53:51Z

1

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

Working fiddle: 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>

credits to EG.arteezy for open function.

edited Sep 28, 2016 at 4:53

answered Sep 28, 2016 at 2:30

user6879896

9 Comments

nnnnnn Over a year ago

This doesn't work. Calling .click() on a select element doesn't make its options list drop down.

Group Of Oceninfo Over a year ago

@user111111 : is it not possible to do without adding any ID or class? specially looking on the current code. I have tried to do using $('.period select').attr('size','10'); but after selecting value it's not hiding automatically

Group Of Oceninfo Over a year ago

@nnnnnn: right it's not working using .click() here is the sample jsfiddle.net/X2rAZ/3

user6879896 Over a year ago

Updated my answer. Try to look at it. I hope I answered it correctly now.

Group Of Oceninfo Over a year ago

@user111111 Thanks for the update but It's still not working for me I have run code snippet

|

nocturns2 · Accepted Answer · 2016-09-28 06:00:57Z

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

Collectives™ on Stack Overflow

How to trigger select option on button click?

3 Answers 3

Comments

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related