发表新帖
发表新帖

Select Multiple Html with columns - possible?

后端 未结
关注
3 425
梦如初夏
梦如初夏 2021-01-15 03:49

I\'m trying to achieve the following:
提交评论
  •  加载中...
  • 执笔经年
    2021-01-15 04:43

    The first snippet works for two-column select list while the second one can handle multiple columns. Semicolon ; is used as a separator.

    // two-column multiple select list
window.onload = function(){
  var s = document.getElementsByTagName('SELECT')[0].options, 
      l = 0, 
      d = '';
  for(i = 0; i < s.length; i++){
    if(s[i].text.length > l) l = s[i].text.length; 
  }
  for(i = 0; i < s.length; i++){
    d = '';  
    line = s[i].text.split(';');
    l1 = (l - line[0].length);
    for(j = 0; j < l1; j++){
      d += '\u00a0'; 
    }
    s[i].text = line[0] + d + line[1];
  }  
};

    Working jsBin

    // multiple-column multiple select list
window.onload = function(){

  var s = document.getElementsByTagName('SELECT')[1].options, l = [];

  for(i = 0; i < s.length; i++){
    column = s[i].text.split(';');
    for(j = 0; j < column.length; j++){
      if(!l[j]) l[j] = 0;
      if(column[j].length > l[j]){
        l[j] = column[j].length;
      }      
    }    
  }  

  for(i = 0; i < s.length; i++){
    column = s[i].text.split(';');
    temp_line = '';
    for(j = 0; j < column.length; j++){
      t = (l[j] - column[j].length);
      d = '\u00a0';
      for(k = 0; k < t; k++){
        d += '\u00a0';
      }
      temp_line += column[j] + d;
    }
    s[i].text = temp_line;    
  }  

};

    Working jsBin

    0 讨论(0)
  • 萌比男神i
    2021-01-15 04:47

    This is not simply achievable via CSS and would not be cross-browser compatible. The best solution for this would be overriding the select using jQuery and create a drop down on the fly which could be styled appropriately using <span> tags or similar.

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题