Question

我正在制作语言选择器 - 想象一下带有选项的选择标签。每个选项标签都有一个带有唯一类的跨度。

我想要做的是，在点击时将该类转移到选择标记。

我没有任何代码，那么如何用jQuery完成？

Answer 1

像这样的东西

$('select').change(function(){
   var t = $(this), o = t.find('option:selected span');
   t.addClass(o.attr('class'));
   o.removeClass();
});

Answer 2

您能提供该部分的HTML代码吗？您的意思是<span>内有<option>？

这不是很好，请参阅It is bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?

但现在我假设您要将<option>的课程复制到<select>

$('#selectid').change(function() {
  var target_class = $(this).find(':selected').attr('class');  
  $(this).removeClass().addClass(target_class);
  # removeClass to clear previous classes added
  # You could add back some default classes if you want
});

Answer 3

默认情况下，onload你的span标签将会消失。话虽如此，我已经为你做了一个简短的分解示例JsFiddle

。我建议你通过一些css魔法工作并继续该项目。以下是一些快速细节。

<select>
    <option selected>select</option>
    <option class="a">1</option>
    <option class="b">2</option>
    <option class="c">3</option>
    <option class="d">4</option>
    <option class="e">5</option>
</select>

<script>
$(function(){
    $('select').change(function(){
        if($(this).val() == 'select'){ 
            $(this).removeAttr('class')
        }else{
            $(this).find('option').each(function(){
                if($(this).text() == $(this).parent().val()){
                    $(this).parent().attr('class',$(this).attr('class'));
                }
            })
            alert($(this).attr('class')); // Select new class Value
        }
    })
})
</script>

将点击元素转移到另一个元素

3 个答案: