CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
mtcrts70
mtcrts70

Reputation: 35

JQuery Mobile CSS for dropdown menus

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.

Upvotes: 0

Views: 259

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28553

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>

Upvotes: 1

Saar
Saar

Reputation: 2306

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/

Upvotes: 2

Related Questions