jQuery Mobile的CSS的下拉菜单

HTML：

<select class="base-choice"> 
    <option value="English">English</option> 
    <option value="Spanish">Spanish</option> 
</select> 

<label class="contrastText" for="user_natives_language">Native Language</label> 
<select class="first-choice" id="user_natives_language" name="user[natives_language]"> 
    <option value="English">English</option> 
    <option value="Spanish">Spanish</option> 
</select> 

<label class="contrastText" for="user_next_language">I Want To Learn</label> 
<select class="second-choice" id="user_next_language" name="user[next_language]"> 
    <option value="Spanish">Spanish</option> 
</select>

JS：

var $secondOption = $('.base-choice>option').clone(); 

$(".first-choice").change(function() { 
    var userSelected = $(this).val(); 

    $('.second-choice').html($secondOption); 


    $('.second-choice option[value="' + userSelected + '"').remove() 
});

CSS：

.base-choice{ 
    display:none !important; 
}

我想用上面的JSFiddle做的事情是使得.base-choice下拉选择器完全隐藏在小提琴的结果部分。另外，当我切换本地语言下拉菜单并选择不同的东西时，您可以看到我想要了解下拉菜单的选项不再粗体显示。关于如何解决这个问题的任何想法。

来源

2015-09-07 mtcrts70

这里是一个更新的小提琴https://jsfiddle.net/RachGal/7avurszn/1

var $secondOption = $('.base-choice>option').clone(); 
 
    
 
$(".first-choice").change(function() { 
 
    var userSelected = $(this).val(); 
 

 
    $('.second-choice').html($secondOption); 
 

 

 
    $('.second-choice option[value="' + userSelected + '"').remove() 
 
});

#select-3-button { 
 
    display:none!important; 
 
    padding:0!important; 
 
    opacity:0!important!; 
 
} 
 

 
.first-choice, .second-choice{opacity:.5; font-weight:normal;}

<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script> 
 
<select class="base-choice"> 
 
    <option value="English">English</option> 
 
    <option value="Spanish">Spanish</option> 
 
</select> 
 

 
<label class="contrastText" for="user_natives_language">Native Language</label> 
 
<select class="first-choice" id="user_natives_language" name="user[natives_language]"> 
 
    <option value="English">English</option> 
 
    <option value="Spanish">Spanish</option> 
 
</select> 
 

 
<label class="contrastText" for="user_next_language">I Want To Learn</label> 
 
<select class="second-choice" id="user_next_language" name="user[next_language]"> 
 
    <option value="Spanish">Spanish</option> 
 
</select>

来源

2015-09-07 19:55:32

注意！重要的是非常重要的:)使用jQuery移动 –

感谢雷切尔工作时！虽然JSFiddle可以工作，但我仍然遇到＃select-3-button在我的开发环境中删除下拉框的问题。任何想法，为什么这可能是？ – mtcrts70

围绕着一个div标签中的html，并且＃select-3-button的id工作。再次感谢！ – mtcrts70

由于在CSS中没有办法选择父元素，所以必须使用javascript。在这个更新的小提琴中，我刚刚找到了带有base-choice的选择，并将父元素（周围div）设置为也显示：none。

$(".base-choice").parent().addClass("invisible");

https://jsfiddle.net/7jknnn2n/4/

来源

2015-09-07 19:39:55 Saar

jQuery Mobile的CSS的下拉菜单

回答

相关问题