Question

这是一个JSFiddle：

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>

用于下拉菜单的JQuery Mobile CSS

2 个答案: