javascript - 用于下拉菜单的 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 下拉选择器完全隐藏在 fiddle 的结果部分。此外，当我切换 Native Language 下拉菜单并选择不同的内容时，您可以看到 I want to learn 下拉菜单的选项不再加粗。关于如何解决此问题的任何想法。

Answer 1

由于 CSS 无法选择父元素，因此您必须使用 javascript。在这个更新的 fiddle 中，我刚刚找到了带有 base-choice 的选择，并将父元素(周围的 div)也设置为显示:无。

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

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