jQuery的利用廣播點擊選擇選項

我可以改變下拉每年顯示價格.. 但是當我點擊每月..它不能變回每月價格..

我想要的單選按鈕被點擊

時，我應該如何解決這個問題太運行選擇的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>

來源

2017-03-17 Zi Gang

我會使用：

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

來源

2017-03-17 04:49:45 Neil

餵你的代碼的工作，但我如何運行選擇平變化的功能嗎？ –

已更新。您現在也可以觸發更改。 – Neil

這麼幹淨..謝謝！ –

試試這個：

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

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

說明：您可以使用jQuery像改變下拉選擇：

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

或

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

來源

2017-03-17 04:47:40

他們都被選中，所以最好先刪除選定的。

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

來源

2017-03-17 04:47:50 Aslam

有處理這種情況非常容易的方法，但是這將解決當前的代碼。您並未從每個選項中刪除「選定」屬性。因此，在選擇兩個單選按鈕之後，這兩個單選按鈕都會導致具有「選定」屬性的兩個對象。

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

來源

2017-03-17 04:56:01

jQuery的利用廣播點擊選擇選項

回答

相關問題