How to activate the selection function when a button is pressed?

Question

I want some kind of JavaScript that can launch / open a selection parameter when someone clicks on a button using the code below for a selection 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>

At the moment I have a condition for setting the minimum night selection as 3,5 and 10, this is very true for products, so when someone does not miss this night function, he will show the above code to select the minimum night, but how to pass some custom JavaScript that can open automatically when a button is clicked.

Answer 1

. , - , , 2. , .

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

.

Answer 2

. select id="selectbox" script.

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

Hide result

• EG.arteezy .

Answer 3

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

Run codeHide result