Question

我有一个标准选择开关。我想在页面加载（准备好）后更改特定选项的文本。值已更改，但未在浏览器用户界面视图中更新。 'refresh'和change（）没有帮助。

<script type="text/javascript">
    $("#set_slider option[value='0']").text('before') ;
    $("#set_slider").change();

    function clickz() {
        $("#set_slider option[value='0']").text('after') ;
        $("#set_slider").change();
        $("#set_slider").slider('refresh'); 
        $("#txt").html($("#set_slider option[value='0']").text());
    }
</script>

<select name="set_slider" id="set_slider" data-role="slider" data-mini="false" >
    <option value="0" >SET</option>
    <option value="1" >OFF</option>
</select>

<div id=txt></div>
<input type='button' onclick='clickz();' value='Update'/>

这个也行不通：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

<body>
    <div data-role="page" id="page2">
    <div data-role="header"><h1>Header</h1></div>
    <div data-role="content">
        <select name="set_slider" id="set_slider" data-role="slider" data-mini="false" >
            <option value="0" >SET</option>
            <option value="1" >OFF</option>
        </select>
    </div>
      <div id=txt></div>
    <input type='button' onclick='clickz();' value='Update'/>
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>

<script type="text/javascript">
    $(document).delegate('#page2', 'pageshow', function (event, ui) {
        $("#set_slider").change();
        $("#set_slider").slider('refresh'); 
    }); 

    $("#set_slider option[value='0']").text('before');
    function clickz() {
        $("#set_slider option[value='0']").text('after');
        $("#txt").html($("#set_slider option[value='0']").text());
        $.mobile.changePage('#page2');
    }
</script>

</body>
</html>

Answer 1

这样的事情有用吗？

http://jsfiddle.net/LgLPu/

JS

$('#set_slider').bind('change', function() {
    var activeLabel  = $('span.ui-slider-label');
    var mySlider     = $(this);
    var text         = mySlider.find('option:selected').text();
    var new_set      = 'Before';
    var new_off      = 'After';

    // changing the text does nothing
    //mySlider.find('option[value="0"]').text(new_set);
    //mySlider.find('option[value="1"]').text(new_off);

    // You need to update the ui-slider-label spans
    if(mySlider.val() == 0) {
        activeLabel.text(new_set);
    } else {
        activeLabel.text(new_off);        
    }

    mySlider.slider( 'refresh' ); // .trigger( 'create' )
});

HTML

<select name="set_slider" id="set_slider" data-role="slider" data-mini="false" >
    <option value="0" >SET</option>
    <option value="1" >OFF</option>
</select>

<!--
This is generated form the slider element:

<span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 40.173913043478265%; ">OFF</span>
-->

如何更改滑块切换文字？

1 个答案: