Question

我有一个显示多个产品的页面，每个产品都有自己的“立即购买”按钮，但是，每个按钮都会显示相同的联系表单（在同一页面上）。

联系表单有一个<select>元素，其中包含选择其中一个产品的下拉选项。是否可以根据页面上单击的按钮预先选择<select>元素的值。

例如，如果用户点击产品“ABC”的“立即购买”按钮，将显示联系表单，“Product”（<select>）元素的值将为“ABC”

表格的代码，万一有人想看一下：

<div class="pop-up">
    <div class="popup-element">

        <img src="img/close.png" id="close-pop-up">
        <form class="form-horizontal" name="htmlform" method="post" role="form" action="mailer.php">
            <input type="text" name="inputName" class="form-control" placeholder="Name">
            <input type="text" name="inputPhone" class="form-control" placeholder="Phone/Email">

            <div class="input-group">
                <select name="inputProduct" class="form-control">
                    <option value="None">Select a Product</option>
                    <option value="abc">ABC</option>
                    <option value="def">DEF</option>
                    <option value="ghi">GHI</option>
                </select>
            </div>
            <textarea name="inputMessage" class="form-control" placeholder="Special requests or custom requirements" rows="3"></textarea>
            <div class="text-center">
                <input type="submit"  class="btn btn-lg btn-default btn-query" value="Get a Quote">
            </div>
        </form>
    </div>
</div>

编辑：
这是我按钮的代码：

<h2 class="btn-success quote pop-up-button">Book Now</h2>

这是jQuery：

jQuery(document).ready(function($){
    //open popup
    $('.pop-up-button').on('click', function(event){
        event.preventDefault();
        $('.pop-up').addClass('is-visible');
    });

    //close popup
    $('.pop-up').on('click', function(event){
        if( $(event.target).is('#close-pop-up') || $(event.target).is('.pop-up') ) {
            event.preventDefault();
            $(this).removeClass('is-visible');
        }
    });

    //close popup when clicking the esc keyboard button
    $(document).keyup(function(event){
        if(event.which=='27'){
            $('.pop-up').removeClass('is-visible');
        }
    });
});

Answer 1

很难说不知道你的产品的结构，但我认为他们以某种方式持有相应的价值。我假设您有这样的结构，产品存储在data-product：

中

<div class="product" data-product="abc">
    <div>ABC</div>
    <h2 class="btn-success quote pop-up-button">Book Now</h2>
</div>

然后您需要做的就是获取所选产品的价值并为其设置select值：

$('.product .btn-success').on('click', function() {
    $('.form-control').val($(this).parent().data('product'));
});

这是jsfiddle DEMO

修改

说明：$('.form-control')是您的选择类，.val()是指其值。我们想要设置一个新值，因此新值在.val(new_value)内。

新值来自所选产品（我们从我们分配给产品的自定义数据属性中获取该产品：data-product="abc"。jQuery的.data('key') returns the值assigned to the selector in format of

$(this) - 如您所说 - 指的是h2元素和data-*分配给它的父级，因此我使用parent()转到{{ 1}}的parrent = h2，然后获取其div.product值。

注1：分配给select的值必须是其中一个选项的值，否则它将无效“

注意2：我使用了您选择的一个类data-*。如果您的更多表单元素具有该类，则最好将其缩小为$（'select.form-control'），或者为您的.form-control提供特定的类或ID。

Answer 2

当然，您可以在按下第一个按钮然后阅读它并使用javascript <option>选择并添加selected="selected"属性时定义变量。所以，你的第一个按钮应该有一个变量添加到href，如下所示：

  <a href="page1.html?option=1">BTN1</a>
  <a href="page1.html?option=2">BTN2</a>

然后你可以使用javascript读取变量：

if(window.location.indexOf("?option=1")!= -1){
  document.querySelectorAll(".form-horizontal option")[optionIndex].setAttribute("selected", "selected");
}

此处，optionIndex是您要选择的选项的索引（请记住，它从0开始，而不是1）。

编辑：如果您的按钮位于同一页面中，那么没有重新加载，更容易，您可以这样做：

说你有：

<h2 class="btn" data-option="1">Btn1</h2>
<h2 class="btn" data-option="2">Btn2</h2>

<script>
    var btns = document.querySelectorAll(".btn");
    var options = document.querySelectorAll(".form-horizontal option");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", autoSelect);
    };
    function autoSelect (e) {
        var index = e.currentTarget.getAttribute("data-option");
        options[index].setAttribute("selected", "selected");
    }
</script>

这有一些优点： 1.你不必加载100kb的jQuery。 2.您正在使用数据属性，这是在html5中指定信息的正确方法

预选表格选项＆gt;根据点击的按钮选择元素？

2 个答案: