Question

我希望做一些相当简单的事情（PHP很好但JS很理想）：它会通过将用户带到帖子/页面来加载帖子/页面，或者在帖子上加载帖子/页面的内容/ page本身（AJAX或其他）。

理想情况下，它会像这样工作：

用户从第一个下拉列表中选择一个值（＆＃39; Apples＆＃39;）。
用户从第二个下拉列表中选择第二个值（＆＃39; Pastry＆＃39;）。
两个下拉列表中的两个值列表都相同（{＆＃34;成分＆＃34;：＆＃34;苹果，香蕉，巧克力，奶油，面团，明胶，柠檬，糕点，桃子，糖，核桃＆＃34;，}）
两个值的每个组合都会产生不同的结果。
对于每个值组合，不同的是页面或页面上加载的文本。
用户点击＆＃34;提交＆＃34;或＆＃34; Go＆＃34;或＆＃34;见组合＆＃34;并启动与该组合相对应的网站链接（页面）（例如，＆＃39;苹果＆＃39;糕点＆＃39;加载＆＃39;苹果+糕点＆＃39;页面）。

简单地说：两个下拉列表，从每个列表中选择一个值，单击“提交”以加载与所选两个值对应的页面。

编辑：我如何修改它来做我需要的？ using output from two drop down lists to create text in multiple places

jQuery的：

$(function() {
var firstValue = $('#dropdown').val();
var secondValue = $('#dropdown2').val();

$('#labelOne').text(firstValue);
$('#labelTwo').text(secondValue);
$('#total').text(firstValue * secondValue);

$('#dropdown').on('change', function(){
    firstValue = $('#dropdown').val();
    $('#labelOne').text(firstValue);
    $('#total').text(firstValue * secondValue);
});

$('#dropdown2').on('change', function(){
    secondValue = $('#dropdown2').val();
    $('#labelTwo').text(secondValue);
    $('#total').text(firstValue * secondValue);
});
});

-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="dropdown" id="dropdown">
      <option value="Apples">Apples</option>
      <option value="Bananas">Bananas</option>
      <option value="Chocolate">Chocolate</option>
      <option value="Pastry">Pastry</option>
</select>
<select name="dropdown2" id="dropdown2">
      <option value="Apples">Apples</option>
      <option value="Bananas">Bananas</option>
      <option value="Chocolate">Chocolate</option>
      <option value="Pastry">Pastry</option>
</select>
<span id="labelOne"></span> *
<span id="labelTwo"></span> =
<span id="total"></span>

Answer 1

您可以将html代码包装到form中，然后在Jquery中根据从两个下拉列表生成的值构建url，并将其分配给表单的action属性，如下所示：

检查link以进行演示

$(function () {
    var firstValue = $('#dropdown').val();
    var secondValue = $('#dropdown2').val();
    var url = null;

    $('#labelOne').text(firstValue);
    $('#labelTwo').text(secondValue);
    $('#total').text(firstValue + secondValue);

    $('#dropdown').on('change', function () {
        firstValue = $('#dropdown').val();
        $('#labelOne').text(firstValue);
        $('#total').text("http://" + firstValue + secondValue + ".com");
        url = "http://" + firstValue + secondValue + ".com";
        $('#form1').attr("action", url);
    });

    $('#dropdown2').on('change', function () {
        secondValue = $('#dropdown2').val();
        $('#labelTwo').text(secondValue);
        $('#total').text("http://" + firstValue + secondValue + ".com");
        url = "http://" + firstValue + secondValue + ".com"
       $('#form1').attr("action", url);
    });

});

的 [更新]

要回答如何获取Query以将组合作为文本加载并将其显示在按钮下方的问题，您可以使用.html()方法。检查更新的link以进行演示

两个下拉列表 - 选择值 - 加载页面

1 个答案:

的 [更新]