CODEWITHSUNDEEP
javascriptjquery
Tony
Tony

Reputation: 1129

jquery mobile "select" does't append or remove "options"

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	
	<script>
    $(document).bind('mobileinit',function(){
        $.mobile.pushStateEnabled = false;
    });
	</script> 
	
	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	<script>jQuery.noConflict(true);</script>

    <fieldset id="When" style="padding:0px; padding-top:5px; margin:0px; margin-top:5px;">
		When
        <select id="Dayy" onchange="DayChange()" data-native-menu="false"> 
          <option value="12">Today</option>
          <option value="13">Tomorrow</option>
          <option value="14">In 2 days</option>
        </select>
	</fieldset>

    <fieldset id="Time" style="padding:0px; margin:0px;">
		Time
        <select id="Timee" data-native-menu="false"> 
          <option value="21">Now</option>
          <option value="22">In few hours</option>
          <option value="23">All Day</option>
          <option value="24">Morning</option>
          <option value="26">Noon</option>
          <option value="28">Afternoon</option>
          <option value="29">Evening</option>
          <option value="31">Midnight</option>
        </select>
		 </fieldset>

        <script type="text/javascript">

        function DayChange() {

        var e = document.getElementById("Dayy");
        var value = e.options[e.selectedIndex].value;
        
        if (value != '12'){

        $("#Timee option[value='21']").remove();
        $("#Timee option[value='22']").remove();

        }

         else if (value == '12'){

        $("#Timee").append('<option value="21">Now</option>');
        $("#Timee").append('<option value="22">In few hours</option>');  

        }

        }

	    </script>

When selecting "Tomorrow" from the first select (Dayy), "Now" and "In few hours" aren't removed, but when I open the second select (Timee) and select any option, "Now" and "In few hours" are removed. Same for the append ! Any solution ? I tried using 

    $('#Timee').selectmenu("refresh", true); and
    $('#Timee').selectmenu().selectmenu("refresh", true); also tried
    $('#Timee').trigger("change");

but nothing worked for me! When adding data-role="none" it worked well but the jquery design disappear

What I want is that when I click Tomorrow -> "Now" and "In few hours" disappear and when I click today they reappear.

That the design I want to conserve

And that when select open

Upvotes: 3

Views: 128

Answers (2)

Tony
Tony

Reputation: 1129

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script>
$(document).bind('mobileinit',function(){
    $.mobile.pushStateEnabled = false;
});
</script> 

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>jQuery.noConflict(true);</script>

it was just an order problem, I just changed the script orders and added $("#Timee").selectmenu("refresh",true); and voila it worked like a charm :D

Upvotes: 1

Jordumus
Jordumus

Reputation: 2783

The problem seems to be in your onChange="DayChange()" call.

I changed the code to use a JQuery event, and it works:

$("#Dayy").on("change", function() {
    DayChange();
})

JSFiddle: https://jsfiddle.net/L8da7qaz/1/

Upvotes: 1

Related Questions