2016-02-08 77 views
1

夥計們如果在選擇字段中沒有找到數據量,我想將選定值更改爲空。例如,我在數量字段中輸入10在我的選擇選項標籤中沒有data-quantity =「10」,因此它應該爲空 且總價格應該等於0。
enter image description here如果沒有找到數據,將選擇值更改爲空

價格的項目:

<input type="hidden" name="price" id="price"class="price" value="<?php if($price!=""){echo $price;}else{echo $shop_item_orig_price;}?>"> 

數量:

<input type="number" name="quant" id="quant" /> // for example I enter 2 

貨運詳細說明:

<select name="shipment" disable> 
<option value="100" data-quantity="1"> 100 per 1 item </option> 
<option value="150" data-quantity="2"> 150 per 2 item </option> //this must be selected 
</select> 

<script> 
function myFunction(quantInput) 
{ 
    var price = document.getElementById("price"); 
    var quantity = document.getElementById("quant"); 
    var shipment = document.getElementById("shipmentSelect"); 
    var total = document.getElementById("total"); 
    $("#shipmentSelect").find("option[data-quantity=" + quantInput + "]").attr('selected', 'selected').siblings().removeAttr('selected'); 
    var shipmentValue = shipment.value; 
    salePrice = price.value; 
    var totalPrice = (salePrice*quantInput) + parseInt(shipmentValue); 
    total.value = totalPrice; 
} 
</script> 

總價:

<input id="total" name="answer" style="margin-top:10px;margin-left:5px;"readonly /> 
+0

可以創建FIDDLE? – androidGenX

+0

爲什麼你不允許10?有限制嗎? 10將是2個訂單的5個訂單。 –

+0

此外,用JavaScript來表明什麼是不允許的可以很好,但你應該檢查在服務器端。很多Web開發人員都知道如何繞過javascript安全。 –

回答

0

我認爲你正在尋找的東西像

<input type="number" name="quant" value="" id="quant" /> 
<select name="shipment" class="select_custom" disable> 
    <option value="100" data-quantity="1"> 100 per 1 item </option> 
    <option value="150" data-quantity="2"> 150 per 2 item </option> //this must be selected 
</select> 

<input type="hidden" name="price" id="price"class="price" value="<?php if($price!=""){echo $price;}else{echo $shop_item_orig_price;}?>"> 

<script> 
    $(document).ready(function() { 
     $("#quant").focusout(function() { 
      var qty = $(this).val(); 
      var price = $("#price").val(); 
      $(".select_custom option").each(function() { 
       console.log($(this).attr('data-quantity')); 
       if ($(this).attr('data-quantity') == qty) { 
        $("#quant").val(qty); 
        $("#price").val(price); 
        return false; 
       } else { 
        $("#quant").val(0); 
        $("#price").val(0); 
        $(".select_custom").append('<option value=null selected>Null</option>').selectmenu('refresh'); 
       } 
      }); 
     }); 
    }); 
</script> 

檢查工作jsfiddle

相關問題