如何發送選擇文本而不是表單上的值？

我的影片是與jQuery的動態創建一個的SelectList：如何發送選擇文本而不是表單上的值？

<script> 
    //Create and Append Select List 
    var sel = $('#MealTierDiv'); 
    sel.append(
     $('<select />').attr({ 
      'id': 'MealTier', 
      'onChange': 'calculatePrice()', 
      'asp-for' : 'MealTier' 
     }).append(
      $('<option />', { value:@Model.PriceBasic, text: 'Basic' }), 
      $('<option />', { value:@Model.PriceMiddle, text: 'Middle' }), 
      $('<option />', { value:@Model.PriceHigh, text: 'High' }) 
     ) 
    ); 

</script>

而這個成功建立在我用適當的選項Razor視圖選擇列表的：

<option value="10">Basic</option>等每個選項。

CalculatePrice看起來是這樣的：

<script> 
     function calculatePrice() { 
      var y = document.getElementById("EstimatedCost"); 
      var x = document.getElementById("NumberOfAttendees"); 
      var z = document.getElementById("MealTier"); 
      y.value = x.value * z.value; 
     } 
    </script>

基本上我讀從選擇選項的值，並乘以NumberOfAttendees它們（這是一個輸入字段）。計算工作正常，並在Sharepoint的結束，我看到估計成本計算和保存正確，但我懷疑我沒有得到「10」而不是「基本」的選擇是整個值與文本的東西。

我需要這些值，因爲calculatePrice方法獲取了選擇列表項的值，並將其乘以輸入字段的值並更新第三個只讀輸入以顯示估計價格。這些項目被保存到Sharepoint，當我去查看實際的Sharepoint列表項目時，這裏的值是空白的，我懷疑這是因爲它是一個期望字符串值的字段，它將從value發送數字，而不是從text 。

我該怎麼做才能讓我的表單帖子發送text到Model.MealTier而不是value？

來源

2017-07-18 Mkalafut

你可以把文本的價值，並把價值可以在您的calculatePrice方法中使用的data- *字段。否則，你必須找到選擇的選項並獲取它的'html（）'或'text（）'。這隻適用於Ajax請求。 – Taplar

@Taplar你能解釋一下怎麼做？我對jQuery非常陌生。我將添加計算方法，以便您可以看到它在做什麼。 – Mkalafut

你只提交之前（和任何計算之後）設置的每個選項的值，因爲它的文字：

$('#formId').submit(function(){ 
    $('#MealTier option').val(function(){ 
     return $(this).text(); 
    }); 
});

來源

2017-07-18 22:25:56 charlietfl

這正是我所需要的。你和Taplar在向我展示實現這個目標的不同方式方面都非常有幫助。 – Mkalafut

//just showing how you could find the selected option for your calc method. 
 
$('#MealTier').on('change', function(e){ 
 
    console.log($(e.target).find('option:selected').data('cost')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="MealTier"> 
 
    <option value="Basic" data-cost="10.00">Basic</option> 
 
    <option value="Extra" data-cost="15.99">Extra</option> 
 
    <option value="Plus" data-cost="29.99">Plus</option> 
 
</select>

來源

2017-07-18 22:26:37 Taplar

謝謝你向我展示如何做到這一點。正如我所說我是jQuery的新手，所以這非常有幫助！ – Mkalafut

如何發送選擇文本而不是表單上的值？

回答

相關問題