我想更改使用单选按钮在组合框(<select>)中选择的选项?</select>

时间:2014-02-06 13:57:29

标签: jquery html css

html:只需选择几个选项即可。

<select id="link">
        <option>Small</option>
        <option>Medium</option>
        <option>Large</option>
        <option>XLarge</option>
</select>

jquery:我复制了select,然后将它们转换为radiobuttons。

$(document).ready(function()
{
    $('#link').each(function(i, select){
    var $select = $(select);
    $select.find('option').each(function(j, option){
    var $option = $(option);
    // Create a radio:
    var $radio = $('<input type="radio" name="radios" value="all"/>');
    // Set name and value:
    $radio.attr('name', $select.attr('name')).attr('value', $option.val());
    // Set id
    $radio.attr('id', $option.val());
    // Set checked if the option was selected
    if ($option.attr('selected')) $radio.attr('checked', 'checked');
    // Insert radio before select box:
    $select.before($radio);
    // Insert a label:
    $select.before(
      $("<label>").attr('for', $option.val()).text($option.text())
    );
    });
    });
});

这是我的jsfiddle:http://jsfiddle.net/T2Cc6/

2 个答案:

答案 0 :(得分:2)

也许这会对你有所帮助:

$(':radio').click( function() {
    var size = $(this).val();
    $("select#link option").filter(function() {
        return $(this).val() == size; 
    }).prop('selected', true);
});

Updated JSFiddle

答案 1 :(得分:0)

试试这个, Demo

$("#link").change(function(){
        $that = $(this)


        $("input[type=radio]").each(function(i, el){
            $("label[for='"+this.value+"']").css('background','#fff')

            if($that.val()==this.value){
                 $("label[for='"+this.value+"']").css('background','#e0e0e0')

            }
        })
    })
    $("input[type=radio]").click(function(){
    $("label").css('background','#fff')
    $("label[for='"+this.value+"']").css('background','#e0e0e0')
    })