使用选择和选项javascript / jquery使用（this）.data（“ value”）获取错误的数据值

Question

我有这段代码将该数据值发送到我的服务器

$("#choiceamountmonthly").change(function () {
    var monthamountblock = $(this).data("value");
    alert("maandelijks pakket gekozen");

    $.getJSON(
        "server/ajax.php",
        {request:"addMonthsToCart", MonthsToCart: monthamountblock},
        function (data) {
            switch(data.response){
                case "success":
                    alert("Met succes toegevoegd");
                    break;
            }
        }
    );
});

在这里，它获取数据值。

<select id="choiceamountmonthly" data-value="1000" name="subscription_choice" title="subscription_choice">
    <option data-value="0" >-Kies het aantal maanden-</option>
    <option data-value="3">3 maanden</option>
    <option data-value="5">6 maanden</option>
    <option data-value="9">12 maanden</option>
</select>

在我的代码中，它采用了select的data-value ，因此将1000发送到我的服务器。 但是我想将选项的data-value发送到我的服务器。 我怎样才能做到这一点？

Answer 1

代替：

var monthamountblock = $(this).data("value");

您需要的是：

var monthamountblock = $(':selected', this).data("value");

这将从选择中获取选择的选项的数据，而不是选择的数据本身。

希望这可以帮助！

Answer 2

您还可以仅将值 （而不是data-value ）用于选择选项：

<select id="choiceamountmonthly" 
        data-value="1000" 
        name="subscription_choice" 
        title="subscription_choice">
  <option value="0" >-Kies het aantal maanden-</option>
  <option value="3">3 maanden</option>
  <option value="5">6 maanden</option>
  <option value="9">12 maanden</option>
</select>

比您可以像这样抓住它：

var monthamountblock = $(this).val();

塞子： http ://plnkr.co/edit/jtMdP3E2LJMBs6CzBzLQ?p=preview

Answer 3

从我所看到的，您不需要选择的数据值。 这似乎覆盖了选项的数据值。 选择应该只需要名称，没有值。

IE浏览器：

`<select id="choiceamountmonthly" name="subscription_choice" title="subscription_choice">
    <option data-value="0" >-Kies het aantal maanden-</option>
    <option data-value="3">3 maanden</option>
    <option data-value="5">6 maanden</option>
    <option data-value="9">12 maanden</option>
</select>
`