JQuery - 尝试更改/更新点击值并传递完整值文本,但只添加数字

时间:2012-06-26 14:59:13

标签: jquery forms

我对JS很新,这是我到目前为止所做的。如果我减去值中的文本,我可以添加它,但这是我想传递的内容。

$("#test").click(function() {
var total = 0;
$.each($(".sv-select") ,function() {
  total += parseInt($(this).val());

});
 $("input[value='15']").val(total);

});

HTML:

<form method="post" id="wpus-cart-button-form" class="wpus-cart-button-form beaver-run--   -bachelor-gulch-7/15---7/16" action="" onsubmit="return ReadForm(this, true);"><input    type="hidden" name="quantity" value="1" /><label class="lv-label size">ROOM OPTIONS:</label>  <br />
<select class="sv-select variation1" name="variation1" onchange="ReadForm (this.form, false);">
<option value="399 standard double room">standard double room $399.00</option>
<option value="499 upgraded king suite">upgraded king suite $499.00</option>
</select>
<p><br/><label class="lv-label color">ADD GUEST:</label><br />
<select class="sv-select variation2" name="variation2" onchange="ReadForm (this.form, false);">
<option value="0 no guests">no guests</option>
<option value="75 +1">+1</option>
</select>
<input type="hidden" name="product" value="Beaver Run - Bachelor Gulch 7/15 - 7/16" /><input type="hidden" name="price" value="15" /><input type="hidden" name="product_tmp" value="Beaver Run - Bachelor Gulch 7/15 - 7/16" /><input type="hidden" name="cartLink" value="http://performancecarclub.org/portfolio/beaver-run-bachelor-gulch-715-716/" /><input type="hidden" name="addcart" value="1" /><input id="test" class="vsubmit submit" type="submit" value="Purchase Trip!" /></form>

这是jsfiddle:http://jsfiddle.net/rYfMx/

3 个答案:

答案 0 :(得分:2)

.click已在jQuery中弃用,.on()是新的好事。它的结构类似于

$("#test").on('click', function(){

});

经过进一步的研究,我发现.click不被弃用(抱歉),在查看jQuery的源代码时,我认为它是别名。所以我很抱歉错了,只想纠正这个评论。

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        if ( fn == null ) {
            fn = data;
            data = null;
        }

        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };

HTML中的值也可能是数字,然后您就不必解析任何整数。除非您需要跟踪所购买的内容。从这里你可以在选择框中获取当前事物的.val()。

<option value="399">standard double room $399.00</option>
<option value="499">upgraded king suite $499.00</option>

你介意给出一些情况吗?总体目标是什么?

答案 1 :(得分:2)

如果出于某种原因,您需要选项中的复杂文本,请将某些内容移至数据属性:

示例选项:

<option value="399 standard double room" data-price="399">standard double room $399.00</option>

脚本:

$("#test").click(function() {
var total = 0;
    $.each($(".sv-select option:selected"), function() {
        total += $(this).data("price");
    });
 $("#price").val(total);
});​

更新小提琴: http://jsfiddle.net/rYfMx/23/

答案 2 :(得分:1)

您可以按某些字符分隔值中的整数和文本,然后执行split将它们传递给数组。然后你可以用他们做你想做的事....

<option value="399|standard double room">standard double room $399.00</option>
<option value="499|upgraded king suite">upgraded king suite $499.00</option>

和你的jquery:

    $("#test").click(function() {
    var total = 0;
    $.each($(".sv-select") ,function() {
      var vals = $(this).val().split("|"),
          price = vals[0],
          type = vals[1];

      total += price;
      //do what you want with type

    });
     $("input[value='15']").val(total);

});