Question

我有一个使用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视图上成功创建SelectList：

每个选项都有

<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>

基本上我正在从Select Options中读取值并将它们乘以NumberOfAttendees（这是一个输入字段）。计算工作正常，在Sharepoint的最后我看到估计的成本计算和保存得当，但我怀疑我没有得到的原因＆＃34; 10＆＃34;而不是＆＃34; Basic＆＃34;因为Select是整个Value vs Text的东西。

我需要这些值，因为calculatePrice方法获取选择列表项的值并将其乘以输入字段的值，并更新第三个只读输入以显示估计价格。这些项目将保存到Sharepoint，当我去查看实际的Sharepoint列表项时，此处的值为空白，我怀疑它是因为它是一个期望字符串值并且它正在存在的字段从value发送的数字而不是text中的字符串。

我需要做什么才能在我的表单发布时将text发送到Model.MealTier而不是value？

Answer 1

在您提交之前（以及在进行任何计算之后）将每个选项的值设置为其文本：

abc123!@#

Answer 2

＆＃13;

//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'));
});

＆＃13;

<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>

＆＃13;

如何在表单帖子上发送选择选项文本而不是值？

2 个答案: