Question

我正在尝试使用以下代码设置属性值的jquery .val（vaue）函数。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){

        $(".qty-btn").click(function(){    

            var $qtyBox = $(".qty-btn").parent().find(".qty-box");
            var $qtyBoxQty = $qtyBox.text();
            var newVal = $qtyBoxQty;
            var form = $(".qty-btn").closest("form");

            if($qtyBoxQty > 0){
                newVal = eval(parseInt($qtyBoxQty) - 1);
                $qtyBox.text(newVal);
            }

            alert( newVal );

            $(".qty-btn").parent().find(".quantity").val(newVal);
            alert( "value = " + $(".qty-btn").parent().find(".quantity").val() );
        });                     


        $("button").click(function(){
            $("input:text").val("Glenn Quagmire");
        });
    });
</script>

</head>
<body>  
<table class="table table-shopping-cart">
    <form action="" method="post" >
        <div class="control-group quantity">
             <div class="controls">
                 <a href="#" class="qty-btn qty-btn-minus">-</a>
                 <div class="qty-box">7</div>
                 <a href="#" class='qty-btn qty-btn-plus blur'>+</a>
                 <span style="display:none;" class="maxQty">1</span>
                 <select name="quantity" style="width: 60px" class="quantity" scliid="261021" id="quantity" >
                     <option value="3" selected="selected" >4</option>
                 </select>
             </div>
         </div>
     </form>
</table>
</body>
</html>

现在这段代码没有产生代码行所需的结果：

$(".qty-btn").parent().find(".quantity").val(newVal);

无效。而后续工作：

 alert( "value = " + $(".qty-btn").parent().find(".quantity").val() );

我在这里做错了什么？

Answer 1

实际上.quantity是select，当您为select设置值时，这意味着option中必须包含select的{{1}}，但这里只有一个value is 3 select中的选项及其newVal，当您将select的值设置为<select name="quantity" id="quantity" style="width: 60px" class="quantity" scliid="261021" id="quantity" > <option value="3" selected="selected" >4</option> <option value="4" selected="selected" >5</option> </select>时，它不在select中。

$("#quantity").val("4");

这将选择值为4的选项

$("#quantity").val("10");

这不会做任何事情

{{1}}

Answer 2

$("select.quantity option:selected").val();

确保您获得SELECTED数量。

Answer 3

http://jsfiddle.net/0qbfspfp/

我将代码缩减为：

<div class="controls">
    <a href="#" class="qty-btn-minus">-</a>
    <a href="#" class='qty-btn-plus'>+</a>
    <select id="quantity" style="width:60px" qt="0"></select>
</div>

并且做了正负函数......我不确定它是否会有所帮助，但我希望是的

.val（value）jquery无效

3 个答案: