jquery mobile“select”不会追加或删除“选项”

时间:2016-04-19 12:00:15

标签: javascript jquery

<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>

从第一个选择(Dayy)中选择“Tomorrow”时,“Now”和“In hours”不会被删除,但当我打开第二个选择(Timee)并选择任何选项时,“Now”和“在几个小时内“被删除。同样的追加! 有解决方案吗 我尝试使用

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

但没有任何对我有用!添加data-role =“none”时,它运行良好,但jquery设计消失了

我想要的是当我点击明天 - &gt; “现在”和“在几个小时内”消失,当我今天点击它们时,它们重新出现。

That the design I want to conserve

And that when select open

2 个答案:

答案 0 :(得分:1)

问题似乎出现在onChange="DayChange()"电话中。

我将代码更改为使用JQuery事件,它可以工作:

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

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

答案 1 :(得分:1)

$data['result1'] = $this->home_model->total_applications(); 
$data['result2'] = $this->home_model->total_applications2();   
$data['result3'] = $this->home_model->total_applications3(); 

这只是一个订单问题,我只是更改了脚本订单并添加了$(“#Timee”)。selectmenu(“refresh”,true);瞧它有点像魅力:D