jQuery Mobile CSS下拉菜单

Question

Here is a 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;
}

What I would like to do with the above JSFiddle is make it such that the .base-choice dropdown selector is hidden completely from the results portion of the fiddle. Also, when I toggle the Native Language dropdown and select something different you can see that the option for the I want to learn dropdown is no longer bolded. Any thoughts on how to fix this.

Answer 1

Since there is no way in CSS to select parent element you must use javascript. In this updated fiddle I just found the select with base-choice and set the parent element (surrounding div) to also display:none.

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

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

Answer 2

Here is an updated fiddle 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>