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

时间:2016-06-06 07:58:07

标签: jquery list select load webpage

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

理想情况下,它会像这样工作:

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

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

编辑:我如何修改它来做我需要的? 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>

1 个答案:

答案 0 :(得分:0)

您可以将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以进行演示