jquery 使用收音机单击选择选项答案

【问题标题】：jquery use radio to click select optionjquery 使用收音机单击选择选项
【发布时间】：2017-03-17 12:56:02
【问题描述】：

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

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

单击单选按钮时我也想运行 select onchange 函数

我应该如何解决这个问题？

$( 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!");
}

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

【问题讨论】：

标签： jquery html select radio-button

【解决方案1】：

我会使用：

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

因为它是单行的，而且它的作用非常直观。它将选择的值设置为与单选按钮相同的值。而且代码会干净很多。此外，它还可以非常快地支持两个以上的单选按钮。（您所要做的就是添加另一个单选按钮，然后添加一个具有相同值的选项）。最后，它还会在更改单选按钮时调用$("#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>

【讨论】：

嘿，您的代码可以运行，但我如何也运行 select onchange 函数？
已更新。您现在也可以触发更改。

【解决方案2】：

试试这个：

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

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

说明：您可以使用 jquery 更改下拉选择，例如：

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

或

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

【讨论】：

【解决方案3】：

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

$( 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!");
}

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

【讨论】：

【解决方案4】：

有更简单的方法来处理这种情况，但这将修复您当前的代码。您没有从每个选项中删除“选定”属性。因此，在选择了两个单选按钮后，这两个对象都具有“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/

【讨论】：