Question

这是我曾经尝试过的......

我可以更改下拉菜单以显示每年的价格.. 但是当我点击每月..它不能改回每月价格..

我想在单击单选按钮时运行select onchange功能

我该如何解决这个问题？

＆＃13;

$( document ).ready(function() {

        $(".radio-billing").change(function () {
                var value = $(this).val();
            
                $("#inputBillingcycle option").each(function () {
                    var optionValue = $(this).val();
                    if (optionValue == value) {
                        $(this).attr("selected", "selected");
                        return;
                    }
                });
        });

});

function someFunction(){
  console.log("function is work!");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<label>
    <input class="radio-billing" type="radio" name="billingcycle" value="monthly" />
    Monthly price - xxxx
</label>

<label>
    <input class="radio-billing" type="radio" name="billingcycle" value="annually" />
    Annually price - xxxx
</label>


<select name="billingcycle" id="inputBillingcycle" class="form-control select-inline" onchange="someFunction();">

<option value="monthly">                                             Monthly price - xxxx
</option>

<option value="annually">                                             Annually price - xxxx
</option>

</select>

＆＃13;

Answer 1

我会用：

$("#inputBillingcycle").val($(this).val()).trigger("change");

因为它是一个单一的班轮，而且它非常直观。它将select的值设置为单选按钮的相同值。并且代码将更加清晰。此外，它支持超过两个单选按钮非常快。（您只需添加另一个单选按钮，然后添加具有相同值的选项）。最后，它还在更改单选按钮时调用$("#inputBillingcycle")的更改功能。

来吧看看：

$( document ).ready(function() {

        $(".radio-billing").change(function () {                
                $("#inputBillingcycle")
                        .val($(this).val())
                        .trigger("change");
        });

});

function someFunction(){
  console.log("function is work!");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<label>
    <input class="radio-billing" type="radio" name="billingcycle" value="monthly" />
    Monthly price - xxxx
</label>

<label>
    <input class="radio-billing" type="radio" name="billingcycle" value="annually" />
    Annually price - xxxx
</label>


<select name="billingcycle" id="inputBillingcycle" class="form-control select-inline" onchange="someFunction();">

<option value="monthly">                                             Monthly price - xxxx
</option>

<option value="annually">                                             Annually price - xxxx
</option>

</select>

Answer 2

试试这个：

$(".radio-billing").change(function () {
    var value = $(this).val();

    $("#inputBillingcycle").val(value).trigger('change');
});

说明：您可以使用jquery更改下拉选项：

$("#idElement").val('optionValue');

或

$("#idElement").val('optionValue').trigger('change');

Answer 3

它们都被选中，因此最好先删除所选的。

＆＃13;

$( document ).ready(function() {

        $(".radio-billing").change(function () {
                var value = $(this).val();
            
                $("#inputBillingcycle option").each(function () {
                    $(this).removeAttr("selected");
                    var optionValue = $(this).val();
                    if (optionValue == value) {
                        $(this).attr("selected", "selected");
                        return;
                    }
                });
        });

});

function someFunction(){
  console.log("function is work!");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<label>
    <input class="radio-billing" type="radio" name="billingcycle" value="monthly" />
    Monthly price - xxxx
</label>

<label>
    <input class="radio-billing" type="radio" name="billingcycle" value="annually" />
    Annually price - xxxx
</label>


<select name="billingcycle" id="inputBillingcycle" class="form-control select-inline" onchange="someFunction();">

<option value="monthly">                                             Monthly price - xxxx
</option>

<option value="annually">                                             Annually price - xxxx
</option>

</select>

＆＃13;

Answer 4

有更简单的方法来处理这种情况，但这将修复您当前的代码。您没有从每个选项中删除“selected”属性。因此，选择两个单选按钮后，将导致两个对象都具有“selected”属性。

$( document ).ready(function() {

  $(".radio-billing").change(function () {

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

    $("#inputBillingcycle option").each(function () {

      $(this).removeAttr("selected");

      if ($(this).val() == value) {

        $(this).attr("selected", "selected");

      }

    });

  });

});

请在此处查看jsfiddle：https://jsfiddle.net/avocahose15/m36b861g/

jquery使用radio点击选择选项

4 个答案: