JQuery移动CSS下拉菜单

JQuery Mobile CSS for dropdown menus

本文关键字：下拉菜单 CSS 移动 JQuery      更新时间：2023-09-26

这是一个JSFiddle:

https://jsfiddle.net/7jknnn2n/

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下拉选择器完全隐藏在该小提琴的结果部分之外。另外，当我切换"母语"下拉框并选择不同的语言时，你可以看到"我想学习"下拉框的选项不再保留。

因为没有办法在CSS中选择父元素，你必须使用javascript。在这个更新的小提琴，我只是找到了选择与基本选择和设置父元素(周围的div)也显示:none。

$(".base-choice").parent().addClass("invisible");
https://jsfiddle.net/7jknnn2n/4/

这是一个更新的小提琴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>

相关文章：