在使用 JS 进行选择时在文本框中显示数据

display data in text box on selection using js

本文关键字：文本 数据 显示 选择 JS 行选      更新时间：2023-09-26

>我有多个盒子。在选择任何框时，我必须在文本框中显示其值。假设我选择框 1。我必须在文本框中显示值，当我取消选择时，该值必须消失。如果我选择多个框，值必须显示在文本框中，以逗号分隔。

怎么能做到呢？

我的代码是：

<input type="text" id="selectedvalue" disabled="true" class="text" name="selectedvalue" />
<tr>
 <td>
      <div class="box A1" id="A1"></div>
 </td>
 <td>
      <div class="box A2"></div>
 </td>
 <td>
      <div class="box A3"></div>
 </td>
 <td>
      <div class="box A4 "></div>
 </td>
</tr>

这可以使用 JQuery 轻松完成，

这是它的JavaScript代码

var clickedBoxes=[];
$(".box").on("click", function() {
  var clikedElem = $(this);
  var text='';
  if(clikedElem.hasClass('clicked')){
    clikedElem.removeClass('clicked');
    clickedBoxes.splice(clickedBoxes.indexOf(clikedElem.text()),1);
  }
  else{
    clikedElem.addClass('clicked');
    clickedBoxes.push(clikedElem.text());    
  }
  $('#selectedvalue').val(clickedBoxes);
});

这是一个完整的 JsFiddle 示例

相关文章：