这是一个 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 下拉菜单的选项不再加粗。关于如何解决此问题的任何想法。
最佳答案
由于 CSS 无法选择父元素,因此您必须使用 javascript。 在这个更新的 fiddle 中,我刚刚找到了带有 base-choice 的选择,并将父元素(周围的 div)也设置为显示:无。
$(".base-choice").parent().addClass("invisible");
关于javascript - 用于下拉菜单的 JQuery Mobile CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32444931/