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

Question

我希望做一些相当简单的事情(PHP是可以的，但JS是理想的)：它将通过将用户带到post/页面来加载post/页面，或者将post/页面的内容加载到post/page本身(AJAX或其他任何东西)。

理想情况下，它的工作方式如下：

• 用户从第一个下拉列表('Apples')中选择一个值。
• 用户从第二下拉列表('Pastry')中选择第二个值。
• 两个下拉列表中的两个值列表都是相同的({“成分”：“苹果、香蕉、巧克力、奶油、面团、明胶、柠檬、糕点、桃子、糖、核桃”，})。
• 两种价值观的每一种组合都会产生不同的结果。
• 对于每个值组合，不同的内容是页面或加载到页面上的文本。
• 用户单击"Submit“、"Go”或“查看组合”，然后启动与该组合相对应的网站链接(页面)(例如'Apples‘+ 'Pastry’加载'Apples + Pastry‘页面)。

简单地说:两个下拉列表，从每个下拉列表中选择一个值，单击submit加载与所选两个值对应的页面。

编辑:我将如何修改它以满足我的需要？使用两个下拉列表的输出在多个地方创建文本

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属性，如下所示：

检查链接以进行演示

$(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);
    });

}); 

更新

要回答如何使查询以文本形式加载组合并将其显示在按钮下面的问题，可以使用.html()方法。检查更新的链接以进行演示