JQuery Mobile CSS for dropdown menus

Question

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

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.

Saar · Accepted Answer · 2015-09-07 19:39:55Z

2

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/

answered Sep 7, 2015 at 19:39

Saar

2,3061 gold badge17 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rachel Gallen · Accepted Answer · 2015-09-07 20:03:47Z

1

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>

edited Sep 7, 2015 at 20:03

answered Sep 7, 2015 at 19:55

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

3 Comments

Rachel Gallen Over a year ago

note the !important is important :) when working with jquery mobile

mtcrts70 Over a year ago

Thanks Rachel! While the JSFiddle works I'm still having issues with the #select-3-button removing the dropdown box in my development environment. Any thoughts as to why this might be?

mtcrts70 Over a year ago

surrounding the html in a div tag with the id of #select-3-button worked. Thanks again!

Collectives™ on Stack Overflow

JQuery Mobile CSS for dropdown menus

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related