jQuery Mobile CSS下拉菜单

Question

这是一个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下拉选择器从小提琴的结果部分完全隐藏。 另外，当我切换“母语”下拉菜单并选择其他选项时，您会看到“我要学习”下拉菜单的选项不再加粗。 关于如何解决此问题的任何想法。

Answer 1

由于CSS中无法选择父元素，因此必须使用javascript。 在此更新的小提琴中，我刚刚找到带有base-choice的select并将其父元素（环绕div）设置为也显示：none。

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

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

Answer 2

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