如何发送选择文本而不是表单上的值？

我的影片是与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

如何发送选择文本而不是表单上的值？

回答

相关问题