jqueryの使用ラジオは価格.. 毎年示すこと</p> <p>私は、ドロップダウンを変更することができます...これは私が試していたものである選択オプション

Question

をクリックしますが、私は毎月のをクリックすると...これは、毎月の価格に戻って変更することはできません。 ..

私はこの問題を解決する方法をラジオボタンが

をクリックしたときに、あまりにも選択の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>

Answer 1

私が使用したい：

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

それは1つのライナーだと、それはそれはやっているものはかなり直感的だからです。これは、選択の値をラジオボタンと同じ値に設定します。そしてコードは多くのクリーナーになります。さらに、2つのラジオボタンだけでなく、非常に高速なサポートも可能です。 （あなたがしなければならないのは、別のラジオボタンと同じ値を持つオプションを追加するだけです）。最後に、ラジオボタンを変更するときにも$("#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

どちらも選択されているので、最初に選択したものを削除する方が良いです。

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

Answer 4

は、この状況に対処するためにはるかに簡単な方法がありますが、これはあなたの現在のコードを修正します。それぞれのオプションから「選択済み」属性を削除していませんでした。したがって、「選択された」属性を有するオブジェクトの両方をもたらすラジオボタンの両方を選択した後。

$(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/