Question

我想要一些JavaScript可以触发/打开选择选项，而有人点击按钮使用下面的代码选择选项

<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">$0</span>
</a></td>

到目前为止，我已将最低夜晚的设置条件选为3,5和10它是非常的产品，所以当有人不通过这个晚上的功能时，它会显示上面的代码选择最小的夜晚，但如何通过一些自定义JavaScript可以在点击按钮时自动打开下拉列表。

Answer 1

尝试在您的选择中添加ID。 select id="selectbox"并添加此脚本。

工作小提琴：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>

为EG.arteezy提供开放功能。

Answer 2

我找到了如何使用下面的代码切换值的方法。因此，当有人点击按钮时，它会采用最小的夜间价值，在这种情况下它是2.所以，它会动态地提供价值。

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

感谢您的建议和帮助。

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>

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

3 个答案: