【问题标题】:JS make a list of multiple select-options in textFieldJS 在 textField 中列出多个选择选项
【发布时间】:2012-05-12 00:10:41
【问题描述】:
 $().ready(function() {  
       $('#add').click(function() {  
        return !$('#select1 option:selected').remove().appendTo('#select2');  
       });  
       $('#remove').click(function() {  
        return !$('#select2 option:selected').remove().appendTo('#select1');  
       });  
      });  

这两个功能将选定的选项从一个多选移动到另一个。我需要在隐藏的输入类型中列出所有添加的选项值(在#select2 中)。每次调用这些函数之一时,都应更新此输入。

【问题讨论】:

  • 请问您为什么要将它们复制到隐藏字段?为什么不直接使用#select2 的值呢?
  • 因为我需要通过 $_POST 将出现在#select2 中的所有选项值发送到另一个 php 页面并将这些数据发送到 mysql。
  • @Matt Ball - 我没有尝试任何东西,因为我的 js 不好。

标签: javascript multiple-select


【解决方案1】:

这应该会有所帮助

var yourInput = $('#IdOfYourInput');

$('#add').click(function() {  
    var opt = !$('#select1 option:selected').remove().appendTo('#select2');
    yourInput.val($('#select2 option').map(function(){return this.value;}).get().join(','));
    return opt;
});

移除类似:

$('#remove').click(function() {
    var opt =$('#select2 option:selected').remove().appendTo('#select1');
    yourInput.val($('#select2 option').map(function(){return this.value;}).get().join(','));
    opt.appendTo('#select1');  
    return opt;
});

我希望这就是你的目标..

【讨论】:

  • var someContainer = $('.. 创建或查找 ..');我应该把输入的 ID 放在这里吧?
  • 不,您可能希望将所有输​​入存储在某个
    中。这是放置该元素的 id 的地方。如果您有
    则使用:var someContainer = $('#formForMyHiddenInputs')。请记住,表单应该已经存在于您的 DOM 结构中——只需在代码中的某处放置一个空表单即可。
  • 我的想法是制作一个 并从#select2 中获取所有值,并将它们列在 中,用逗号分隔。
  • 太棒了!非常感谢。
猜你喜欢
相关资源
最近更新 更多
热门标签