Jquery选择和取消选择多个输入没有CTRL点击
jquery select and unselect multiple input without ctrl click
场景如下:
<select id="id_user" name="user" multiple="multiple">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
</select>
<span id="select1">Select 1 user</span> <span id="remove1">Remove 1 select</span>
<span id="select2">Select 2 user</span> <span id="remove2">Remove 2 select</span>
<span id="select3">Select 3 user</span> <span id="remove3">Remove 3 select</span>
<span id="select4">Select 4 user</span> <span id="remove4">Remove 4 select</span>
<script type="text/javascript">
$("#select1").click(function(){ $("#id_user").val("1").prop("selected", true);
???
});
$("#remove1").click(function(){ $("#id_user").val("1").prop("selected", false);
???
});
</script>
我想让用户例如点击选择1 span,然后点击选择2 span和两个选项将被选择在多个选择。如果用户单击"Remove 1 select span",则只删除"select 1"。我不知道如何完成那项任务。当我用#select2, #select3(…)创建其他点击函数时,点击一次选择,删除上次点击时选择的选项。同样的问题是删除选项。如何创建Ctrl-click效果
你可以动态生成你的控件…(参见现场演示):
<div id="selectControls"></div>
<script type="text/javascript">
$(function() {
$('#id_user > option').each(function() {
var $this = $(this);
$('#selectControls').append($('<span></span>')
.text("Select " + $this.val() + " user")
.click(function() { $this.attr('selected', true); $('#id_user').focus(); })
).append(' ').append($('<span></span>')
.text("Deselect " + $this.val() + " user")
.click(function() { $this.removeAttr('selected'); $('#id_user').focus(); })
).append('<br />');
});
});
</script>
生成您自己的控件不仅是一个更好的解决方案,它避免维护,如果您添加/删除列表中的OPTION
元素…并保持HTML更短,以便在您的选择增加时从服务器下载。
我已经为您创建了一个工作示例:http://jsfiddle.net/Gajotres/WESdZ/
$("#select1, #select2, #select3, #select4").click(function(){
$("#id_user option[value='" + $(this).attr('id').replace("select","") + "']").prop("selected", true);
});
$("#remove1, #remove2, #remove3, #remove4").click(function(){
$("#id_user option[value='" + $(this).attr('id').replace("remove","") + "']").prop("selected", false);
});
如果你有这个HTML:
<select id="id_user" name="user" multiple="multiple">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
</select>
<br/>
<span class="select" value="1">Select 1 user</span> | <span class="remove" value="1">Remove 1 select</span><br/>
<span class="select" value="2">Select 2 user</span> | <span class="remove" value="2">Remove 2 select</span><br/>
<span class="select" value="3">Select 3 user</span> | <span class="remove" value="3">Remove 3 select</span><br/>
<span class="select" value="4">Select 4 user</span> | <span class="remove" value="4">Remove 4 select</span><br/>
使用如下javascript:
$(".select,.remove").click(function(){
var option = $("#id_user").find("option[value='" + $(this).attr("value") + "']");
option.prop("selected", $(this).is(".select"));
});
最终将得到控制多重选择列表中所选项的span。
首先使用event.which
http://api.jquery.com/event.which/
下面也使用data-
属性来定义项目编号:
<span class="item_select" data-item="1">Select 1 user</span>
如果您将所有ID更改为2类,如item_select
和item_remove
,以下将在单击span时管理select标记:
var ctrlKey = false;
$(document).on('keydown keyup',function(e) {
if (e.which === 17) {
ctrlKey = e.type=='keydown';
}
});
var $user = $('#id_user')
$('.item_select,.item_remove ').click(function() {
var isSelect = $(this).is('.item_select');
/* reset if ctrl key not active*/
if (!ctrlKey && isSelect) {
$user.val('')
}
$user.find('option[value="' + $(this).data('item') + '"]').prop('selected', isSelect)
});
演示:http://jsfiddle.net/pR9vj/6/
相关文章:
- jquery点击函数select&取消选择
- 角度ng变化或ng点击选择can'不起作用
- 点击选择Div不在IE上工作
- Ng点击记住单选按钮选择
- 我如何选择/点击一个带有for=“”的元素"属性[量角器]
- jquery点击选择器附加在多个元素上
- 当点击今天按钮时,Bootstrap Date Time Picker未选择当前时间
- Grails-设置g:点击img标签选择值
- 如何通过Fabric.js只点击实际内容来选择对象
- jQuery-On按钮点击触发器选择选项
- 从下拉列表中选择时,自动触发点击按钮
- DC.JS点击选择栏
- 内联JavaScript启用/禁用点击单选按钮上的选择和文本框
- 点击<选择>元素,但不在<选项>
- 使<选择>选项”;点击“;自动地
- Bootstrap点击选择获取点击值
- Onsen UI在点击时显示一个日期选择器
- 点击
- 项目时的文本选择
- 通过 javascript 在每次点击时动态禁用文本选择
- 当我点击一个按钮时随机选择一个声音来重现的脚本