如何用jQuery将hidden输入框值显示到Div并为显示值添加样式？

你只需要在input事件的回调里，获取hidden输入框的当前值，再把它赋值给#showselected的内容即可。注意：hidden输入框默认不会主动触发input事件，如果是通过JS代码修改它的value，需要手动触发input事件，或者直接调用更新内容的函数。

修改后的完整代码：

<input type="hidden" value="" name="numberselection">
<script>
var $o = jQuery.noConflict();

// 定义复用的更新函数
function updateSelectedContent() {
  var inputValue = $o('input[name="numberselection"]').val();
  $o('#showselected').text(inputValue);
}

// 监听input事件（若通过用户交互触发，hidden输入框通常由JS修改）
$o('input[name="numberselection"]').on('input', updateSelectedContent);

// 示例：JS修改value时，手动触发事件更新内容
// $o('input[name="numberselection"]').val('123,456').trigger('input');
</script>

<div id="showselected"></div>

修改选择器后，这段代码可以用来给#showselected的内容添加样式，但需要修正几个问题：

1. 原代码存在语法错误，末尾缺少闭合的)；
2. 原颜色生成逻辑#12345' + i会出现无效颜色（比如i=10时会生成#1234510，不符合十六进制颜色规则），建议用预设颜色数组循环使用；
3. 拆分内容时建议用text()而非html()，避免之前生成的span标签被重复拆分。

适配后的代码：

// 仅针对#showselected处理
$o('#showselected').each(function(){
  var textArray = $o(this).text().split(',');
  var htmlContent = '';
  // 预设有效颜色数组
  var colorList = ['#123456', '#654321', '#ff4444', '#44aa44', '#4444ff'];
  
  for(var i = 0; i < textArray.length; i++) {
    // 循环取用颜色，避免越界
    var targetColor = colorList[i % colorList.length];
    htmlContent += '<span style="color: ' + targetColor + '">' + textArray[i] + '</span>';
  }
  $o(this).html(htmlContent);
});

你可以把这段样式处理代码整合到更新函数里，每次更新内容后自动应用样式：

function updateSelectedContent() {
  var inputValue = $o('input[name="numberselection"]').val();
  $o('#showselected').text(inputValue);

  // 追加样式处理逻辑
  $o('#showselected').each(function(){
    var textArray = $o(this).text().split(',');
    var htmlContent = '';
    var colorList = ['#123456', '#654321', '#ff4444', '#44aa44', '#4444ff'];
    
    for(var i = 0; i < textArray.length; i++) {
      var targetColor = colorList[i % colorList.length];
      htmlContent += '<span style="color: ' + targetColor + '">' + textArray[i] + '</span>';
    }
    $o(this).html(htmlContent);
  });
}

内容的提问来源于stack exchange，提问作者JayJay