【前端小代码】选中checkbox多选框,将值填入select中option中

通过js实现
代码如下

<script>
function checkbox()
{
    var str=document.getElementsByName("box");
    var shosetype=document.getElementById("select");  
    var objarray=str.length;
    var chestr="";
    var option = '';
    for (i=0;i<objarray;i++)
    {
       if(str[i].checked == true)
       {
            chestr+=str[i].value+",";
            option += '<option value="' + i + '">' + str[i].value + '</option>';
       }
    }
    shosetype.innerHTML=option;
    if(chestr == "")
    {
      alert("请先选择一个爱好~!");
    }
    else
    {
      alert("您先择的是:"+chestr);
    }
}
</script>

html代码

选择您的爱好:
  <input type="checkbox" name="box" id="box1" value="跳水" />跳水
  <input type="checkbox" name="box" id="box2" value="跑步" />跑步
  <input type="checkbox" name="box" id="box3" value="听音乐" />听音乐
  <input type="button" name="button" id="button" onclick="checkbox()" value="提交" />
  <select value="d" id="select">

  </select>

效果图

打开状态

提交后

select中显示选中

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
假设你有一个 checkbox 列表,每个 checkbox 对应一个数据项,那么你可以通过以下步骤将选中的数据组装成 map 并传输给后端: 1. 监听 checkbox 的点击事件,当 checkbox选中或取消选中时,更新一个变量或数组,记录当前选中的数据项。 示例代码: ```javascript let selectedItems = {}; // 用一个对象记录选中的数据项 $('input[type="checkbox"]').on('change', function() { const itemId = $(this).val(); // 获取当前 checkbox 对应的数据项 ID if ($(this).is(':checked')) { selectedItems[itemId] = true; // 选中状态,将 ID 加入选中列表 } else { delete selectedItems[itemId]; // 非选中状态,将 ID 从选中列表删除 } }); ``` 2. 当用户点击提交按钮时,将选中的数据项组装成一个 map,传输给后端。 示例代码: ```javascript $('#submit-btn').on('click', function() { const selectedIds = Object.keys(selectedItems); // 获取所有选中的数据项 ID const selectedData = {}; // 用一个对象表示选中的数据 selectedIds.forEach((id) => { const itemData = getItemDataById(id); // 根据 ID 获取数据项的详细信息 selectedData[id] = itemData; // 将数据项信息添加选中数据 }); // 发起 AJAX 请求,将选中数据传输给后端 $.ajax({ url: '/api/submit', method: 'POST', data: JSON.stringify(selectedData), contentType: 'application/json', success: function(response) { alert('提交成功!'); }, error: function(xhr, textStatus, error) { alert('提交失败:' + error); } }); }); ``` 需要注意的是,这里将选中的数据项组装成了一个对象,其对象的键为数据项的 ID,为数据项的详细信息。你需要根据实际情况修改 `getItemDataById` 函数,根据 ID 获取数据项的详细信息,例如从页面获取、从后端获取等。另外,需要将选中数据以 JSON 格式传输给后端,这里使用了 jQuery 的 AJAX 函数来发起 POST 请求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值