如何使用數據屬性來存儲和選擇一個選項上的兩個價格

-3

我試圖創建一個表單，其中每個選項有兩個潛在值。用戶將首先選擇「低價」（lp）或「高價」（hp），然後選擇類型1或2，它們都具有「hp」和「lp」的數據屬性。理想情況下，通過使用lp或hp值調用數據屬性，我應該能夠從類型1或2中選擇我想要的價格，並將其顯示在標有「成本」的輸入中。然後成本應乘以鏡頭找到「總計」。不幸的是，我不能讓數據屬性工作，除非它們在實際的選擇標籤中，而不是在單個選項標籤中。任何想法如何解決這個將不勝感激！謝謝！如何使用數據屬性來存儲和選擇一個選項上的兩個價格

這裏是一個JS：

http://jsfiddle.net/gv0029/Esr9f/3/

這裏是HTML：

<select id="pPost_P" class="pSelect"> 
    <option value="select">Price</option> 
    <option value="lp">Low Price</option> 
    <option value="hp">High Price</option> 
</select> 
<br/> 
<select class="pSelect" id="pPost_D"> 
    <option value="select">Type</option> 
    <option data-hp="5" data-lp="2" value="Type 1">Type 1</option> 
    <option data-hp="9" data-lp="8" value="Type 2">Type 2</option> 
</select> 
<br/>  
<input id="pPost_C" placeholder="Cost" /> 
<br/> 
<input id="pPost_F" class="pSelect" placeholder="Footage" /> 
<br/> 
<input id="pPost_A" placeholder="Total" />

這裏是JS：

$(document.body).on('keypress keydown keyup change', '[class="pSelect"]', function() { 
     var parts = $(this).attr('id').split("_"), 
      service = parts[0], 

      price = $("#" + service + "_P").val(), 
      fee = parseFloat($("#" + service + "_D").data("'" + price + "'"), 10), 
      cost = $("#" + service + "_C"), 
      footage = parseFloat($("#" + service + "_F").val(), 
      10), 
      amount = ''; 
     if (isNaN(footage)) { 
      total.val("Please enter Quantity"); 
     } 

     if (!isNaN(footage) && (!isNaN(Number(fee)))) { 
      amount = Math.ceil(footage * fee); 
      total.val(amount); 
      cost.val(fee); 
     } 
});

來源

2014-02-06 mario

這是與jQuery相當瑣碎。閱讀on（）和append（）等方法。不過，我認爲你的條款很混亂。根據定義，「選項」是一個單一的實體。 – isherwood

提供您的嘗試，如果有的話... –

如果值來自數據庫使用[ajax]（http://api.jquery.com/jquery.ajax/）。 –

剛準備，以防有人在這裏離開這個有同樣的問題。總之，我最大的問題是我沒有在選擇內部選擇實際的選項（至少不是正確的），所以一旦我確定它只是一個使用data（）參數爲「percentage」的問題，即選擇器中選定選項的值，選擇高價或低價。謝謝您的幫助！希望這可以幫助別人。

JS：

$(document.body).on('keypress keydown keyup change', '[class="pSelect"]', function(){ 
     var parts = $(this).attr('id').split("_"), 
      service = parts[0], 
      percentage = $("#" + service + "_P option:selected").val(), 
      price = $("#" + service + "_D option:selected").data(percentage), 
      footage = parseFloat($("#" + service + "_F").val(),10), 
      fee = Math.ceil(price * footage), 
      cost = $("#" + service + "_C"); 

      cost.val(price); 

     if(isNaN(footage)) { 
      $("#" + service + "_A").val("Please enter Quantity"); 
     } 

     if(!isNaN(footage) && (!isNaN(fee))) { 
      $("#" + service + "_A").val(Math.ceil(fee)); 
      $("#" + service + "_C").val(fee); 
     } 
    });

的有兩個與之相關聯的不同價格的一個選項的一個例子： HTML

<option data-hp="63" data-lp="5">Type1</option>

來源

2014-02-10 19:42:57 mario

試試這個：

$("#test").change(function(){ 
var content = $('#test option:selected').html(); 
var valor = $('#test').val(); 
$("#second").append("<option value='"+valor+"'>"+content+"</option>"); 
});

在這裏工作的小提琴：像我一樣http://jsfiddle.net/robertrozas/Zz5JL/

來源

2014-02-06 14:30:09 Hackerman

謝謝你！我更關心在選擇字段中爲單個選項獲取兩個值，但Blazemonger已經回答了這個問題，但這也有幫助！謝謝！ – mario

如何使用數據屬性來存儲和選擇一個選項上的兩個價格

回答

相關問題