將選項標籤水平分爲兩部分（列）？

是否可以將選項列表分爲兩部分（列）？例如，某個選項的文本位於左側，另一個位於右側，但位於同一行。將選項標籤水平分爲兩部分（列）？

例子：

+--------------------select options-----------------------+ 
    option1      option text for text1 
    option2      option text for text1 
+---------------------------------------------------------+

來源

2015-09-05 sdgh

要在哪種語言或腳本中實現此目的？ –

html和css以及其他網頁語言 – sdgh

您可以嘗試optiongroup，鏈接示例 - http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup –

我找到解決的辦法。它不會像你想要的那樣完美，但我認爲它應該適合你。

它有點棘手，也很長。我張貼的jsfiddle文件給你：

*http://jsfiddle.net/7c5qr0h9/8/*

（我用的*，以適應一個答案的資格）

也許這將是一個方式的結果。一探究竟！

來源

2015-09-05 16:49:39 crolex

雖然我建議使用一個樣式<ul>，或<ol>，做到這一點使用JavaScript和CSS，有可能–雖然不一定可靠或相當–用JavaScript來做到這一點;但是，有沒有方法可以使用原生HTML或CSS執行此操作，特別是因爲<option>元素不能包含子節點，這意味着CSS無法將各個列與padding或text-align或任何其他其他手段。

但是，對於JavaScript，一種方法如下：這裏我已經擴展了HTMLSelectElement的原型，這意味着這被用作該元素類型的一種方法，如果這個方法在註釋中沒有被充分記錄以便這個同伴可以被認爲是有問題的，那麼你應該有任何，不小心遇到，或覆蓋它。不過，我認爲這是一種方便，但我會在本答案的後面提供更多的「功能」（可能是「侵入性更小」）方法。這就是說，這是我回答的第一次迭代（代碼說明在代碼中的註釋）：

HTMLSelectElement.prototype.optionColumnize = function(opts) { 
 
    // caching a reference to the 'this' Node, which will be 
 
    // (barring binding/applying etc) a <select> element: 
 
    var select = this, 
 

 
    // caching the options of the <select> element, using 
 
    // Function.prototype.call() and Array.prototype.slice() 
 
    // to create an Array of those options (rather than a 
 
    // NodeList/collection: 
 
    options = Array.prototype.slice.call(select.options, 0), 
 

 
    // iterating over the Array of <option> elements in 
 
    // in order to find the <option> with the most 
 
    // text, using Array.prototype.reduce() to compare 
 
    // the length of the current <option> against the 
 
    // previous <option>, and retaining the <option> 
 
    // with the greatest length: 
 
    greatestOption = options.reduce(function(a, b) { 
 
     return a.text.length > b.text.length ? a : b; 
 
    }), 
 

 
    // initialising the default settings of the method: 
 
    s = { 
 
     // String: defining the character which should 
 
     // separate the columns: 
 
     'separator': '/', 
 

 
     // Number or String: defining the character-length 
 
     // of the between 'column' spacing (whatever 
 
     // argument is given will be passed to parseInt() 
 
     // prior to use): 
 
     'paddingLength': 5, 
 

 
     // String: characters from which the padding string 
 
     // will be created; this string will be repeated 
 
     // by the 'paddingLength' (above) variable: 
 
     'paddingString': '&nbsp;' 
 
    }; 
 

 
    // iterating over the user-supplied opts Object to employ 
 
    // user-defined settings: 
 
    for (var prop in opts) { 
 

 
    // if the opts Object has property set by the user 
 
    // (ie not a property inherited from its prototype 
 
    // chain): 
 
    if (opts.hasOwnProperty(prop)) { 
 

 
     // we set the property of the default 
 
     // settings Object ('s') to be equal to 
 
     // that set in the opts Object: 
 
     s[prop] = opts[prop]; 
 
    } 
 
    } 
 

 
    // splitting the columns of the greatestOption (found above) 
 
    // into an Array by splitting the string of text by the 
 
    // character supplied by the s.separator setting: 
 
    var greatestOptionColumns = greatestOption.text.split(s.separator), 
 

 
    // finding the integer represented by the s.paddingLength 
 
    // property, converting the value into a base-10 number: 
 
    paddingLength = parseInt(s.paddingLength, 10), 
 

 
    // creating two variables (currently undefined) to be 
 
    // used within the loop (below): 
 
    columns, 
 
    textDelta; 
 

 
    // iterating over each of the <option> elements held in the 
 
    // options Array, using Array.prototype.forEach() to do so: 
 
    options.forEach(function(opt) { 
 
    // the first argument of the anonymous function, 
 
    // (here 'opt') is the current array-element of 
 
    // the array over which we're iterating. 
 

 
    // splitting the text of the current <option> of 
 
    // the options Array by the supplied string held 
 
    // in the s.separator property, this returns an 
 
    // array over which we iterate with the 
 
    // Array.prototype.map() function to return a new 
 
    // Array to the 'columns' variable: 
 
    columns = opt.text.split(s.separator).map(function(col, index, allCols) { 
 
     // 'col': the current element of the created array, 
 
     // index: the index of the current array-element, 
 
     // allCols: the full array. 
 

 
     // if the current array-element is less than the 
 
     // length of the Array - 1 (Length is one-based, 
 
     // JavaScript Arrays have zero-based indexing): 
 
     if (index < allCols.length - 1) { 
 

 
     // we find the difference between the text-length 
 
     // of the current element and the element of the 
 
     // same index in the greatestOptionColumns Array: 
 
     textDelta = greatestOptionColumns[index].length - col.length; 
 

 
     // here we return the current array-element + the padding string, 
 
     // created via String.prototype.repeat(), which is chained to 
 
     // a String ('s.paddingString') and a numeric argument 
 
     // ('paddingLength + textDelta') to create a new String 
 
     // of 's.paddingString' by the number of times supplied as 
 
     // the numeric argument ('n'.repeat(3) -> 'nnn'): 
 
     return col + s.paddingString.repeat(paddingLength + textDelta); 
 

 
     // otherwise (if we are the last array-element of the 
 
     // current array 
 
     } else { 
 

 
     // we simply return the existing array-element 
 
     // so we don't have any 'trailing' padding: 
 
     return col; 
 
     } 
 
    }); 
 

 
    // setting the innerHTML of the current <option> element 
 
    // to the contents of the columns Array, using 
 
    // Array.prototype.join() to join the elements together 
 
    // with an empty-string: 
 
    opt.innerHTML = columns.join(''); 
 
    }); 
 
}; 
 

 
// calling the function with no arguments: 
 
document.getElementById('demo1').optionColumnize(); 
 

 
// calling the function, and changing the padding-length to 10: 
 
document.getElementById('demo2').optionColumnize({ 
 
    'paddingLength': 10 
 
}); 
 

 
// calling the function, and changing the padding-String to '~': 
 
document.getElementById('demo3').optionColumnize({ 
 
    'paddingString': '~' 
 
}); 
 

 
// calling the function, and changing the column-separator to 'o': 
 
document.getElementById('demo4').optionColumnize({ 
 
    'separator': 'o' 
 
}); 
 

 
// calling the function, and changing: 
 
// - column-separator to 'n', 
 
// - padding-length to 7, 
 
// - padding-string to '+' 
 
document.getElementById('demo5').optionColumnize({ 
 
    'separator': 'n', 
 
    'paddingLength': '7', 
 
    'paddingString': '+' 
 
});

select { 
 
    display: block; 
 
    margin: 0 0 1em 0; 
 
}

<select id="demo1"> 
 
    <option value="1">option 1/value 1/column3</option> 
 
    <option value="2">option 2/value 2/column3</option> 
 
    <option value="3">option 3/value 3/column3</option> 
 
    <option value="4">option 4/value 4/column3</option> 
 
    <option value="5">option 5/value 5/column3</option> 
 
    <option value="6">option 6/value 6/column3</option> 
 
    <option value="7">option 7/value 7/column3</option> 
 
    <option value="8">option 8/value 8/column3</option> 
 
    <option value="9">option 9/value 9/column3</option> 
 
    <option value="10">option 10/value 9/column3</option> 
 
</select> 
 
<select id="demo2"> 
 
    <option value="1">option 1/value 1/column3</option> 
 
    <option value="2">option 2/value 2/column3</option> 
 
    <option value="3">option 3/value 3/column3</option> 
 
    <option value="4">option 4/value 4/column3</option> 
 
    <option value="5">option 5/value 5/column3</option> 
 
    <option value="6">option 6/value 6/column3</option> 
 
    <option value="7">option 7/value 7/column3</option> 
 
    <option value="8">option 8/value 8/column3</option> 
 
    <option value="9">option 9/value 9/column3</option> 
 
    <option value="10">option 10/value 9/column3</option> 
 
</select> 
 
<select id="demo3"> 
 
    <option value="1">option 1/value 1/column3</option> 
 
    <option value="2">option 2/value 2/column3</option> 
 
    <option value="3">option 3/value 3/column3</option> 
 
    <option value="4">option 4/value 4/column3</option> 
 
    <option value="5">option 5/value 5/column3</option> 
 
    <option value="6">option 6/value 6/column3</option> 
 
    <option value="7">option 7/value 7/column3</option> 
 
    <option value="8">option 8/value 8/column3</option> 
 
    <option value="9">option 9/value 9/column3</option> 
 
    <option value="10">option 10/value 9/column3</option> 
 
</select> 
 
<select id="demo4"> 
 
    <option value="1">option 1/value 1/column3</option> 
 
    <option value="2">option 2/value 2/column3</option> 
 
    <option value="3">option 3/value 3/column3</option> 
 
    <option value="4">option 4/value 4/column3</option> 
 
    <option value="5">option 5/value 5/column3</option> 
 
    <option value="6">option 6/value 6/column3</option> 
 
    <option value="7">option 7/value 7/column3</option> 
 
    <option value="8">option 8/value 8/column3</option> 
 
    <option value="9">option 9/value 9/column3</option> 
 
    <option value="10">option 10/value 9/column3</option> 
 
</select> 
 
<select id="demo5"> 
 
    <option value="1">option 1/value 1/column3</option> 
 
    <option value="2">option 2/value 2/column3</option> 
 
    <option value="3">option 3/value 3/column3</option> 
 
    <option value="4">option 4/value 4/column3</option> 
 
    <option value="5">option 5/value 5/column3</option> 
 
    <option value="6">option 6/value 6/column3</option> 
 
    <option value="7">option 7/value 7/column3</option> 
 
    <option value="8">option 8/value 8/column3</option> 
 
    <option value="9">option 9/value 9/column3</option> 
 
    <option value="10">option 10/value 9/column3</option> 
 
</select>

用於實驗或開發外部JS Fiddle demo。

當然，另一種方法是將其用作「常規」功能，而不是作爲HTMLSelectElement的方法;像使用它一樣，我們必須將相關節點傳遞給函數，並且理想情況下但不強制& - 檢查提供的節點是否爲<select>元素。要做到這一點，上面稍做修改如下：

function optionColumnize(el, opts) { 
 
    // caching a reference to the Node upon which we're working, 
 
    // and ensuring it's a select element (otherwise we return 
 
    // from the function): 
 
    if (el.tagName.toLowerCase() === 'select') { 
 
    var select = el; 
 
    } else { 
 
    return false; 
 
    } 
 

 
    // caching the options of the <select> element, using 
 
    // Function.prototype.call() and Array.prototype.slice() 
 
    // to create an Array of those options (rather than a 
 
    // NodeList/collection: 
 
    options = Array.prototype.slice.call(select.options, 0), 
 

 
    // iterating over the Array of <option> elements in 
 
    // in order to find the <option> with the most 
 
    // text, using Array.prototype.reduce() to compare 
 
    // the length of the current <option> against the 
 
    // previous <option>, and retaining the <option> 
 
    // with the greatest length: 
 
    greatestOption = options.reduce(function(a, b) { 
 
     return a.text.length > b.text.length ? a : b; 
 
    }), 
 

 
    // initialising the default settings of the method: 
 
    s = { 
 
     // String: defining the character which should 
 
     // separate the columns: 
 
     'separator': '/', 
 

 
     // Number or String: defining the character-length 
 
     // of the between 'column' spacing (whatever 
 
     // argument is given will be passed to parseInt() 
 
     // prior to use): 
 
     'paddingLength': 5, 
 

 
     // String: characters from which the padding string 
 
     // will be created; this string will be repeated 
 
     // by the 'paddingLength' (above) variable: 
 
     'paddingString': '&nbsp;' 
 
    }; 
 

 
    // iterating over the user-supplied opts Object to employ 
 
    // user-defined settings: 
 
    for (var prop in opts) { 
 

 
    // if the opts Object has property set by the user 
 
    // (ie not a property inherited from its prototype 
 
    // chain): 
 
    if (opts.hasOwnProperty(prop)) { 
 

 
     // we set the property of the default 
 
     // settings Object ('s') to be equal to 
 
     // that set in the opts Object: 
 
     s[prop] = opts[prop]; 
 
    } 
 
    } 
 

 
    // splitting the columns of the greatestOption (found above) 
 
    // into an Array by splitting the string of text by the 
 
    // character supplied by the s.separator setting: 
 
    var greatestOptionColumns = greatestOption.text.split(s.separator), 
 

 
    // finding the integer represented by the s.paddingLength 
 
    // property, converting the value into a base-10 number: 
 
    paddingLength = parseInt(s.paddingLength, 10), 
 

 
    // creating two variables (currently undefined) to be 
 
    // used within the loop (below): 
 
    columns, 
 
    textDelta; 
 

 
    // iterating over each of the <option> elements held in the 
 
    // options Array, using Array.prototype.forEach() to do so: 
 
    options.forEach(function(opt) { 
 
    // the first argument of the anonymous function, 
 
    // (here 'opt') is the current array-element of 
 
    // the array over which we're iterating. 
 

 
    // splitting the text of the current <option> of 
 
    // the options Array by the supplied string held 
 
    // in the s.separator property, this returns an 
 
    // array over which we iterate with the 
 
    // Array.prototype.map() function to return a new 
 
    // Array to the 'columns' variable: 
 
    columns = opt.text.split(s.separator).map(function(col, index, allCols) { 
 
     // 'col': the current element of the created array, 
 
     // index: the index of the current array-element, 
 
     // allCols: the full array. 
 

 
     // if the current array-element is less than the 
 
     // length of the Array - 1 (Length is one-based, 
 
     // JavaScript Arrays have zero-based indexing): 
 
     if (index < allCols.length - 1) { 
 

 
     // we find the difference between the text-length 
 
     // of the current element and the element of the 
 
     // same index in the greatestOptionColumns Array: 
 
     textDelta = greatestOptionColumns[index].length - col.length; 
 

 
     // here we return the current array-element + the padding string, 
 
     // created via String.prototype.repeat(), which is chained to 
 
     // a String ('s.paddingString') and a numeric argument 
 
     // ('paddingLength + textDelta') to create a new String 
 
     // of 's.paddingString' by the number of times supplied as 
 
     // the numeric argument ('n'.repeat(3) -> 'nnn'): 
 
     return col + s.paddingString.repeat(paddingLength + textDelta); 
 

 
     // otherwise (if we are the last array-element of the 
 
     // current array 
 
     } else { 
 

 
     // we simply return the existing array-element 
 
     // so we don't have any 'trailing' padding: 
 
     return col; 
 
     } 
 
    }); 
 

 
    // setting the innerHTML of the current <option> element 
 
    // to the contents of the columns Array, using 
 
    // Array.prototype.join() to join the elements together 
 
    // with an empty-string: 
 
    opt.innerHTML = columns.join(''); 
 
    }); 
 
}; 
 

 
// calling the function with no arguments: 
 
optionColumnize(document.getElementById('demo1')); 
 

 
// calling the function, and changing the padding-length to 10: 
 
optionColumnize(document.getElementById('demo2'), { 
 
    'paddingLength': 10 
 
}); 
 

 
// calling the function, and changing the padding-String to '~': 
 
optionColumnize(document.getElementById('demo3'), { 
 
    'paddingString': '~' 
 
}); 
 

 
// calling the function, and changing the separator to 'o': 
 
optionColumnize(document.getElementById('demo4'), { 
 
    'separator': 'o' 
 
}); 
 

 
// calling the function, and changing: 
 
// - column-separator to 'n', 
 
// - padding-length to 7, 
 
// - padding-string to '+' 
 
optionColumnize(document.getElementById('demo5'), { 
 
    'separator': 'n', 
 
    'paddingLength': '7', 
 
    'paddingString': '+' 
 
});

select { 
 
    display: block; 
 
    margin: 0 0 1em 0; 
 
}

<select id="demo1"> 
 
    <option value="1">option 1/value 1/column3</option> 
 
    <option value="2">option 2/value 2/column3</option> 
 
    <option value="3">option 3/value 3/column3</option> 
 
    <option value="4">option 4/value 4/column3</option> 
 
    <option value="5">option 5/value 5/column3</option> 
 
    <option value="6">option 6/value 6/column3</option> 
 
    <option value="7">option 7/value 7/column3</option> 
 
    <option value="8">option 8/value 8/column3</option> 
 
    <option value="9">option 9/value 9/column3</option> 
 
    <option value="10">option 10/value 9/column3</option> 
 
</select> 
 
<select id="demo2"> 
 
    <option value="1">option 1/value 1/column3</option> 
 
    <option value="2">option 2/value 2/column3</option> 
 
    <option value="3">option 3/value 3/column3</option> 
 
    <option value="4">option 4/value 4/column3</option> 
 
    <option value="5">option 5/value 5/column3</option> 
 
    <option value="6">option 6/value 6/column3</option> 
 
    <option value="7">option 7/value 7/column3</option> 
 
    <option value="8">option 8/value 8/column3</option> 
 
    <option value="9">option 9/value 9/column3</option> 
 
    <option value="10">option 10/value 9/column3</option> 
 
</select> 
 
<select id="demo3"> 
 
    <option value="1">option 1/value 1/column3</option> 
 
    <option value="2">option 2/value 2/column3</option> 
 
    <option value="3">option 3/value 3/column3</option> 
 
    <option value="4">option 4/value 4/column3</option> 
 
    <option value="5">option 5/value 5/column3</option> 
 
    <option value="6">option 6/value 6/column3</option> 
 
    <option value="7">option 7/value 7/column3</option> 
 
    <option value="8">option 8/value 8/column3</option> 
 
    <option value="9">option 9/value 9/column3</option> 
 
    <option value="10">option 10/value 9/column3</option> 
 
</select> 
 
<select id="demo4"> 
 
    <option value="1">option 1/value 1/column3</option> 
 
    <option value="2">option 2/value 2/column3</option> 
 
    <option value="3">option 3/value 3/column3</option> 
 
    <option value="4">option 4/value 4/column3</option> 
 
    <option value="5">option 5/value 5/column3</option> 
 
    <option value="6">option 6/value 6/column3</option> 
 
    <option value="7">option 7/value 7/column3</option> 
 
    <option value="8">option 8/value 8/column3</option> 
 
    <option value="9">option 9/value 9/column3</option> 
 
    <option value="10">option 10/value 9/column3</option> 
 
</select> 
 
<select id="demo5"> 
 
    <option value="1">option 1/value 1/column3</option> 
 
    <option value="2">option 2/value 2/column3</option> 
 
    <option value="3">option 3/value 3/column3</option> 
 
    <option value="4">option 4/value 4/column3</option> 
 
    <option value="5">option 5/value 5/column3</option> 
 
    <option value="6">option 6/value 6/column3</option> 
 
    <option value="7">option 7/value 7/column3</option> 
 
    <option value="8">option 8/value 8/column3</option> 
 
    <option value="9">option 9/value 9/column3</option> 
 
    <option value="10">option 10/value 9/column3</option> 
 
</select>

用於實驗或開發外部JS Fiddle demo。

參考文獻：

來源

2015-09-05 20:04:12

將選項標籤水平分爲兩部分（列）？

回答

相關問題