如何设置select只读不可编辑且select的值可传递

Posted 2023-04-13

1. <select style="width:195px" name="role" id="role" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">

这种方法可以使下拉框和平常没有区别，看起来没有任何不同。唯一不同的就是下拉并单并选择之后，它不会鸟你，选了和没有选一样一样的。就是无视客户的选择。

2.设置disabled属性<select style="width:195px" name="role" id="role" disabled="disabled">

这个看起来更直接，直观就是有只读的感觉，也不可以点击和下拉了。里面的字也会变成灰色

当属性设置为"disabled"时，提交表单时，select的值无法传递，提交前移除disabled属性$("#role").removeAttr("disabled");

jquery添加属性$("#role").attr("disabled","disabled"); 参考技术A 尝试在option标签的onclick事件处理函数中加入：

evt=evt||window.event;//取Event对象
if(flag==1)//你判断是否只读的标志

if(evt.preventDefault)

evt.preventDefault();//阻止默认的行为发生

else

evt.returnValue=false;

//下面写自己的处理方法

设置输入中的Java脚本为只读的值

如何设置输入html中Java脚本的只读值（按类读取）？

HTML

<input type="time" class="start" />

<select class="selectboxlist" >
<option>
<option>
<option>
<option>
...
</select>

Java脚本中的疲倦内容

if (selectboxlist.selectedIndex == 2 || selectboxlist.selectedIndex == 13 || selectboxlist.selectedIndex == 14) {         
            start.value = "00:00";  // works
            start.setAttribute.readonly = true;  // doesnt work
        }

答案

设置这样的属性

start.setAttribute('readonly',true)

function func()
{
var selectboxlist=document.querySelector('select');
if (selectboxlist.selectedIndex == 2 || selectboxlist.selectedIndex == 13 || selectboxlist.selectedIndex == 14) {   
var start=document.querySelector('.start')
            start.value = "00:00";  // works
            start.setAttribute('readonly',true)  // doesnt work
            console.log(start)
        }
        }

<input type="time" class="start" />


<select class="selectboxlist" onchange="func()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>

另一答案

您可以获取输入元素，然后将其readOnly属性设置为true：

document.querySelector('.input').readOnly = true;

以上是关于如何设置select只读不可编辑且select的值可传递的主要内容，如果未能解决你的问题，请参考以下文章

如何设置select只读不可编辑且select的值可传递

jsp怎样使得下拉框只读而且不会影响取值

如何实现表单里的select值与input关联？

怎么将checkbox，radio，select控件设置为只读，不可选

js 如何设置text为灰色不可编辑？

js 如何设置select的宽度的？