如何让select 的每一个option 中的文字水平居中？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让select 的每一个option 中的文字水平居中？相关的知识，希望对你有一定的参考价值。

设置样式如下 select:

width: auto;
padding: 0 2%;
margin: 0;

option

text-align:center;

1、必须设置select的padding，留意：padding: 0 2%; 前面的0表示上下，后面的值表示左右，这个值设置为1%都可以，但是不能是0,值越大，select就越长。

2、不要设置select的宽（width），auto就可以了。

扩展资料：

注意：

readset writeset exceptset指定我们要让内核测试读、写和异常条件的描述字。如果对某一个的条件不感兴趣，就可以把它设为NULL。如果三个指针都为NULL，我们就有了一个比sleep()函数更为精确的定时器（sleep()以毫秒为最小单位，这个以微秒为单位）。

select使用描述字集，典型地是一个整数数组，其中每个整数中的每一位对应一个描述字。假设使用32位整数，那么该数组的第一个元素对应于描述字0~31，第二个元素对应于描述字32~63，依此类推。所有的实现细节都与应用程序无关，它们隐藏在名为fd_set的数据类型和以下四个宏中：

void FD_ZERO (fd_set *fdset); // clear all bits in fdset

void FD_SET (int fd,fd_set *fdset); // turn on the bit for fd in fdset

void FD_CLR (int fd,fd_set *fdset); // turn off the bit for fd in fdset

intFD_ISSET(int fd,fd_set *fdset); // is the bit for fd on in fdset

 参考技术A

用下面的方式可以，测试过FireFox以及Chrome，没有试过IE。

<style type="text/css">
.s_center 
    width: auto;
    padding: 0 2%;
    margin: 0;

.s_center option
    text-align: center;

</style>
<select class="s_center">
    <option>value1</option>
    <option>value2</option>
    <option>value3</option>
</select>

要点：

    必须设置select的padding，留意：padding: 0 2%; 前面的0表示上下，后面的值表示左右，这个值设置为1%都可以，但是不能是0,值越大，select就越长。

    不要设置select的宽（width），auto就可以了。


试试看吧。

追问

但是前提是我的select 是设定了宽的，因为是在表格中，不设定宽的话，好难看。

现在是我在option 前面加了&nbsp,但是发现在不同的浏览器下，看的效果也是不一样的~

追答

这个问题也可以有别的解决办法：

    不设置select的宽度，你可以设置select外围容器的宽度，效果可以一样；

    调整padding的值，因为外围容器宽度是固定的，所以这个值也是可以调整的；

    在每个浏览器下显示不一样是正常的，因为每个浏览器的内核的不同，在处理html以及样式的时候也会有一定的差别，只是要调整参数或者增加css hack来达到尽量一致，以求兼容。

    大致思路是这个意思了，具体的还得自己调整。

    下面是一个改进了的例子：

<style type="text/css">
.s_center 
    width: auto;
    padding: 0 50%;
    margin: 0;

.s_center option
    text-align: center;

</style>
<div style="width: 400px; border: 1px solid silver;">
    <select class="s_center">
        <option>value1</option>
        <option>value2</option>
        <option>value3</option>
    </select>
</div>

本回答被提问者采纳 参考技术B 用下面的方式可以，测试过FireFox以及Chrome，没有试过IE。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style type="text/css">
.s_center
width: auto;
padding: 0 2%;
margin: 0;

.s_center option
text-align: center;

</style>
<select class="s_center">
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>

要点：
必须设置select的padding，留意：padding: 0 2%; 前面的0表示上下，后面的值表示左右，这个值设置为1%都可以，但是不能是0,值越大，select就越长。
不要设置select的宽（width），auto就可以了。 参考技术C

CSS: 

.s_center

width: auto;

padding: 0 0 0 20px;

margin: 0;

option中的值是以最长的文本确定整个下拉选项的内容宽度的，文本太短的可以用占位符调整位置； &nbsp;

如何根据 JavaScript 中的值禁用 <select> 中的 <option>？

【中文标题】如何根据 JavaScript 中的值禁用 <select> 中的 <option>？【英文标题】：How can I disable an <option> in a <select> based on its value in JavaScript? 【发布时间】：2011-01-10 11:39:04 【问题描述】：

我有一个&lt;select&gt; 和多个&lt;option&gt;s。每个都有独特的价值。我需要使用给定的定义值（不是 innerhtml）禁用&lt;option&gt;。

有人知道怎么做吗？

【问题讨论】：

我认为最好的解决方案是在另一个问题中给出：***.com/questions/31860103/… 【参考方案1】：

JavaScript，2022 年

您可以在 2022 年使用生成的 NodeList 中的 querySelectorAll 和 forEach 更轻松地完成相同的操作。

document.querySelectorAll("#foo option").forEach(opt => 
    if (opt.value == "***") 
        opt.disabled = true;
    
);

不过，请注意字符串比较。 '***' 和 '***' 不是同一个字符串。因此，您可以在比较之前对字符串调用 .toLowerCase()，甚至可以使用不区分大小写的正则表达式比较，如下所示：

if ( /^***$/i.test(option.value) ) 
  option.disabled = true;

纯 Javascript (2010)

使用纯 Javascript，您必须循环浏览每个选项，并单独检查它的值。

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) 
  // lowercase comparison for case-insensitivity
  (op[i].value.toLowerCase() == "***") 
    ? op[i].disabled = true 
    : op[i].disabled = false ;

不启用非目标元素：

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) 
  // lowercase comparison for case-insensitivity
  if (op[i].value.toLowerCase() == "***") 
    op[i].disabled = true;

###jQuery

使用 jQuery，您可以用一行代码完成：

$("option[value='***']")
  .attr("disabled", "disabled")
  .siblings().removeAttr("disabled");

不启用非目标元素：

$("option[value='***']").attr("disabled", "disabled");

​ 请注意，此 不是 不区分大小写的。 “***”将不等于“***”。要获得不区分大小写的匹配，您必须循环遍历每个，将值转换为小写，然后检查：

$("option").each(function()
  if ($(this).val().toLowerCase() == "***") 
    $(this).attr("disabled", "disabled").siblings().removeAttr("disabled");
  
);

不启用非目标元素：

$("option").each(function()
  if ($(this).val().toLowerCase() == "***") 
    $(this).attr("disabled", "disabled");
  
);

【讨论】：

不，对于值，您将使用 $("option[value=someval]")。他在寻找价值，而不是里面的文字。 啊，好点子，@KyleButt。我已经更新了我的解决方案。感谢您指出这一点。 禁用带有“***”的选项并不意味着启用那些没有“***”的选项。 @Gumbo：正确。我试图预测未来的问题，但我可以看到我的解决方案将如何导致更多问题，例如用户是否默认禁用了 other 选项。我已经更新了我的解决方案。感谢您指出我的错误。 op[i].disabled = (op[i].value.toLowerCase() == "***") ;) +1【参考方案2】：

你也可以使用这个功能，

function optionDisable(selectId, optionIndices)

    for (var idxCount=0; idxCount<optionIndices.length;idxCount++)
    
        document.getElementById(selectId).children[optionIndices[idxCount]].disabled="disabled";
        document.getElementById(selectId).children[optionIndices[idxCount]].style.backgroundColor = '#ccc';
        document.getElementById(selectId).children[optionIndices[idxCount]].style.color = '#f00';

【讨论】：

我已经格式化了代码，但是这个函数的其他问题需要你来解决。 :P【参考方案3】：

为选项设置一个 id，然后使用按 id 获取元素并在选择 x 值时禁用它..

例子

<body>
      <select class="pull-right text-muted small" 
                 name="driveCapacity" id=driveCapacity onchange="checkRPM()">
      <option value="4000.0" id="4000">4TB</option>
      <option value="900.0" id="900">900GB</option>
      <option value="300.0" id ="300">300GB</option>
    </select>
    </body>
<script>
var perfType = document.getElementById("driveRPM").value;
if(perfType == "7200")         
        document.getElementById("driveCapacity").value = "4000.0";
        document.getElementById("4000").disabled = false;           
    else          
        document.getElementById("4000").disabled = true;            
        
</script>

【讨论】：

【参考方案4】： 
var vals = new Array( 2, 3, 5, 8 );
select_disable_options('add_reklamaciq_reason',vals);
select_disable_options('add_reklamaciq_reason');

function select_disable_options(selectid,vals)
  var selected = false ;
  $('#'+selectid+' option').removeAttr('selected');
  $('#'+selectid+' option').each(function(i,elem)
       var elid = parseInt($(elem).attr('value'));
       if(vals)
           if(vals.indexOf(elid) != -1)
               $(elem).removeAttr('disabled');
               if(selected == false)
                   $(elem).attr('selected','selected');
                   selected = true ; 
               
           else
               $(elem).attr('disabled','disabled'); 
           
       else
            $(elem).removeAttr('disabled');
       
  );

这里有JQ ..如果有人搜索它

【讨论】：

【参考方案5】：

我还想给你一个想法，用给定的定义值 (not innerhtml) 禁用 &lt;option&gt;。我建议使用jQuery 来获得最简单的方法。请参阅下面的示例。

HTML 

Status:  
<div id="option">
   <select class="status">
      <option value="hand" selected>Hand</option>
      <option value="simple">Typed</option>
      <option value="printed">Printed</option>
   </select>
</div>

Javascript

这里的想法是当当前Status 是Hand 时如何禁用Printed 选项

var status = $('#option').find('.status');//to get current the selected value
var op = status.find('option');//to get the elements for disable attribute
(status.val() == 'hand')? op[2].disabled = true: op[2].disabled = false;

你可以在这里看到它是如何工作的：

https://jsfiddle.net/chetabahana/f7ejxhnk/28/

【讨论】：

【参考方案6】：

由于某些原因，其他答案不必要地复杂，用纯 JavaScript 一行很容易做到：

Array.prototype.find.call(selectElement.options, o => o.value === optionValue).disabled = true;

或

selectElement.querySelector('option[value="'+optionValue.replace(/["\\]/g, '\\$&')+'"]').disabled = true;

性能取决于选项的数量（选项越多，第一个越慢）以及是否可以从第二个中省略escaping（replace 调用）。第一个也使用了Array.find 和 IE11 中不可用的箭头函数。

【讨论】：

【参考方案7】：

使用简单的选择器：

document.querySelector('select[name="theName"] option[value="theValue"]').disabled = true;

【讨论】：

以上是关于如何让select 的每一个option 中的文字水平居中？的主要内容，如果未能解决你的问题，请参考以下文章

如何修改select的option展示样式？还有我想修改被选中的select框中的文字的样式，怎么修改？

如何设置select和option的文字居中

如何让鼠标移到select中option上时产生事件？

使用纯CSS，如何改变<option>元素选中状态的文字颜色

js 怎么获取select value值 和optione的文字？

设置select和option的文字居中的方法