0

我正在尝试设置一个可选择的项目列表 - 并且希望在页面加载时已经选择了一些列表项目。用户需要能够选择多个项目（让这部分工作），但需要能够取消选择列表中的预选项目......就像用户最初点击它们来选择它们一样。感谢您提供的任何建议-

Javascript：

$(function() {
    $("#selectable").bind("mousedown", function(e) {       //acts as if the control key is pressed so that more than one item can be selected
    e.metaKey = true;
    }).selectable();
});

风格：

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 10%; overflow:auto;}
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

HTML

<ol id="selectable" >
    <li class="ui-widget-content" value="SU12AM">12:00AM</li>     
    <li class="ui-widget-content" value="SU125AM">12:30</li>
    <li class="ui-widget-content" value="SU1AM">1:00</li>
    <li class="ui-widget-content" value="SU15AM">1:30</li>
    <li class="ui-widget-content" value="SU2AM">2:00</li>
    <li class="ui-widget-content" value="SU25AM">2:30</li>
    <li class="ui-widget-content" value="SU3AM">3:00</li>
</ol>
4

1 回答 1

0 
<html lang="en">
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
jQuery(function() {
    $(".ui-widget-content").bind("mousedown", function(e) {
    var element = $(e.target);
    if (element.hasClass('selected')) {
        element.removeClass( "selected" );
    }
    else{
    element.addClass( "selected" );
    }
    });
});


</script>
<style>
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 10%; overflow:auto;}
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
.selected { background: #0014FF; }
</style>
</head>
<body>
<ol id="selectable" >
    <li class="ui-widget-content" value="SU12AM">12:00AM</li>     
    <li class="ui-widget-content" value="SU125AM">12:30</li>
    <li class="ui-widget-content" value="SU1AM">1:00</li>
    <li class="ui-widget-content" value="SU15AM">1:30</li>
    <li class="ui-widget-content" value="SU2AM">2:00</li>
    <li class="ui-widget-content" value="SU25AM">2:30</li>
    <li class="ui-widget-content" value="SU3AM">3:00</li>
</ol>


</body>
</html>

试试这个代码，我希望它的帮助

于 2013-08-29T21:59:59.090 回答