Question

您好我有以下代码，只从我的选择选项列表中选择第一个选项。

以下是四个选择列表中的一个：

<select class="attr " id="attr17">
    <option class="attropt" value="">Please select</option>
    <option class="attropt" value="17| " >  (2)</option>
    <option class="attropt" value="17|H" >H (499)</option>
    <option class="attropt" value="17|M" >M (20)</option>
    <option class="attropt" value="17|N" >N (12)</option>
    <option class="attropt" value="17|P" >P (3)</option>
    <option class="attropt" value="17|Q" >Q (24)</option>
    <option class="attropt" value="17|R" >R (116)</option>
    <option class="attropt" value="17|S" >S (50)</option>
    <option class="attropt" value="17|T" >T (367)</option>
    <option class="attropt" value="17|V" >V (534)</option>
    <option class="attropt" value="17|W" >W (476)</option>
    <option class="attropt" value="17|Y" >Y (616)</option>
    <option class="attropt" value="17|Z" >Z (54)</option>
</select>

这是我正在使用的jquery代码：

<script type="text/javascript">

    $("document").ready(function(){

        var link = "http://easytyre123.co.uk/tyres?attr=";
        link += $('#attr13').find(":selected").val();
        link += ".";
        link += $('#attr15').find(":selected").val();
        link += ".";
        link += $("#attr14 option:selected").val();
        link += ".";
        link += $('#attr17').find(":selected").val();

        //$('#sendLink').attr("href", link);

         $("#sendLink").click(function(){
            alert(link);
          });

    });



</script>
<a href="#" id="sendLink">Click to update results and prices</a>

当用户点击我想要提醒Link字符串值的#sendLink时。但是，它始终打印出最高的空值。有没有理由为什么我没选择它？

只是为了澄清我是否选择＆＃39; H（499）＆＃39;然后价值仍然是空白的，虽然我期待＆＃34; 17 | H＆＃34;是返回值。

我也没有在firebug控制台中看到任何错误。

如果有一种更简单的方法可以做到这一点，那我就是全心全意。

提前致谢。

Answer 1

问题是您在构建字符串一次，而不是在用户单击时重建它。将字符串创建代码移动到回调中：

 $("#sendLink").click(function(){
    var link = "http://easytyre123.co.uk/tyres?attr=";
    link += $('#attr13').find(":selected").val();
    link += ".";
    link += $('#attr15').find(":selected").val();
    link += ".";
    link += $("#attr14 option:selected").val();
    link += ".";
    link += $('#attr17').find(":selected").val();
    alert(link);
  });

使用click代替change的任何理由？

Answer 2

点击发生时应该进行链接：

$("#sendLink").click(function(){
        var link = "http://easytyre123.co.uk/tyres?attr=";
    link += $('#attr13').find(":selected").val();
    link += ".";
    link += $('#attr15').find(":selected").val();
    link += ".";
    link += $("#attr14 option:selected").val();
    link += ".";
    link += $('#attr17').find(":selected").val();
        alert(link);
      });

});

Answer 3

只需在click事件处理程序上执行选定的选项值捕获，而不是在dom ready中执行此操作。

像

$("#sendLink").click(function(){
   alert($("#attr17 option:selected").val(););
});

Answer 4

当页面加载时，您只创建一次sting。一旦用户点击sendlink，就应该调用function1。因此，要么使用按钮的onclick事件，要么使用下拉列表的更改事件并创建URL。

此外，您需要使用$（＆＃39;＃attr13＆＃39;）。find（＆＃34;：selected＆＃34;）。val（）;而不是$（＆＃39;＃attr13＆＃39;）。find（＆＃34;：selected＆＃34;）。val（）;

感谢。希望这会有所帮助。

为什么此代码仅选择顶级选项？

4 个答案: