如何在单击按钮时触发 select 选项？

Question

我想要一些 JavaScript 可以 trigger/open select 选项，而有人使用下面的代码为 select 选项单击按钮

<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">[=12=]</span>
</a></td>

截至目前，我已经设置了最低夜间条件 select 作为 3,5 和 10 它非常适合产品，所以当有人没有通过这个夜间功能时，它会显示上面的代码 select 最少的夜晚，但如何通过一些自定义 JavaScript 当他们点击按钮时可以自动打开下拉菜单。

Answer 1

尝试将 ID 放在您的 select 上。 select id="selectbox" 并添加此脚本。

工作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">[=11=]</span>
</a></td>

感谢 EG.arteezy 开放功能。

Answer 2

这样的事情对你有用吗？我不知道您的其余代码是什么样的，所以我编写了自己的示例。我在下面添加了一个片段。

        $(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">[=12=]</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>

Answer 3

我找到了使用以下代码切换值的方法。所以，当有人点击按钮时，它会获取最小的夜间价值，在本例中是 2。所以，它是动态提供价值的。

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

感谢您的建议和帮助。

如何在单击按钮时触发 select 选项？

How to trigger select option on button click?

html

javascript

css

jquery

selector