`

真正实现 select 下拉 只读 readonly

    博客分类:
  • HTML
 
阅读更多

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>


<SCRIPT LANGUAGE="JavaScript">

 $(document).ready(function(){ 
	var index=$("#countries").attr('selectedIndex')
	$("#countries").change(function() {
		this.selectedIndex=index;
	 });
});

</SCRIPT>


<select id="countries" > 
	<option value="1">Country1</option> 
	<option value="2">Country2</option> 
	<option value="3">Country3</option> 
	<option value="4">Country4</option> 
	<option value="5">Country5</option> 
	<option value="6">Country6</option> 
	<option value="7">Country7</option> 
	<option value="8">Country8</option> 
	<option value="9">Country9</option>
</select>

 

 原理:

<select  onchange="this.selectedIndex=1">  
<option>1 </option>  
<option  selected>2 </option>  
<option>3 </option>  
</select>
分享到:
评论

相关推荐

    HTML中Select不用Disabled实现ReadOnly的效果

    而题目中提到的需求是“HTML中Select不用`Disabled`实现`ReadOnly`的效果”,即保持下拉列表可查看,但阻止用户交互。 要实现这种效果,我们可以利用事件处理程序来模拟只读状态,而不直接使用`disabled`属性。以下...

    设置disabled属性后台读不到数据如何让select支持readonly

    然而,对于`&lt;select&gt;`、`&lt;input type="checkbox"&gt;`和`&lt;input type="radio"&gt;`,`readonly`属性并不起作用,通常需要使用`disabled`属性来达到类似的效果。然而,如前所述,`disabled`会导致数据无法提交,因此需要...

    下拉框设置为只读模式时不再弹出下拉框

    综上所述,要实现"下拉框设置为只读模式时不再弹出下拉框"的功能,我们可以结合使用HTML的`readonly`属性、CSS的`pointer-events`属性以及可能的JavaScript代码来达到预期效果。在提供的`test.html`文件中,应该包含...

    商业编程-源码-Dropdownlist只读技术源码.zip

    &lt;select value={selectedOption} readOnly&gt; {options.map(option =&gt; ( {option.label} ))} &lt;/select&gt; ``` 5. **样式调整**: 为了强调只读效果,通常会通过CSS改变Dropdownlist的外观,例如去掉高亮、...

    用js设置下拉框为只读的小技巧

    最后,我们在`&lt;body&gt;`标签的`onload`事件中调用`init`函数,确保页面加载完成后执行`selectReadOnly`,将下拉框设置为只读状态。 通过这种方式,虽然select元素本身不具备只读特性,但我们利用JavaScript模拟了只读...

    Select下拉框模糊查询功能实现代码

    `SelectValue`函数在用户从下拉框中选择一个选项时被调用,它获取选中的值和文本,并将其分别设置到对应的隐藏输入框和只读输入框中: ```javascript function SelectValue(obj) { var input = obj.parentNode....

    readonly和disabled属性的区别

    相比之下,`disabled`属性的适用范围更广,它不仅适用于上述的文本输入类型,还可以应用到单选按钮(`&lt;input type="radio"&gt;`)、复选框(`&lt;input type="checkbox"&gt;`)、下拉列表(`&lt;select&gt;`)以及其他类型的表单...

    JS禁用页面上所有控件的实现方法(附demo源码下载).docx

    此外,如果希望在禁用控件的同时保持其视觉状态不变,可以使用`readOnly`属性(只读)或自定义CSS来实现。 需要注意的是,禁用元素并不意味着阻止所有的用户交互,例如通过开发者工具或恶意脚本,用户仍然有可能绕...

    控件的可用与否

    本文主要讨论如何使用JavaScript实现对文本输入框(Text)和下拉选择框(Select)这两种控件的可用与不可用状态的切换。 1. **文本输入框(Text)的控制** 文本输入框`&lt;input type="text"&gt;`的可用性通常通过`...

    Python 窗体(tkinter)下拉列表框(Combobox)实例

    - `state`:控件的状态,如`"readonly"`表示只读。 - `textvariable`:关联的字符串变量,用于控制显示的文本。 - `values`:下拉列表中的选项。 - `current(index)`:设置当前选中的索引。 还有一些重要的方法: -...

    select选择事件问题

    第二个单元格包含一个`&lt;input type="text" name="tktTypeDesc" readonly&gt;`,这是一个只读文本输入框,其初始值为空,但当用户在`&lt;select&gt;`中做出选择时,它的值将被更新。 在代码的第二部分,我们可以看到`onchange...

    jq表单框架jqtransform的常用事例

    本篇将深入探讨jqTransform的常用功能,包括复选框、单选按钮、表单列表、只读输入框、下拉框以及如何结合layer框架实现弹出框。 1. **复选框与单选按钮** jqTransform提供了一套优雅的复选框和单选按钮样式,它们...

    html知识

    - **readonly**: 如果设定,表示文本框只读,不可编辑。 **示例代码:** ```html 在W3School,你可以找到你所需要的所有的网站建设教程。 ``` #### HTML &lt;select&gt; 标签 `&lt;select&gt;` 标签用于创建一个下拉选择...

    droplist:模拟选择

    [+] 支持设置输入框为只读。readonly属性配置。readonly配置。 [+] 在展开下拉浮层的时候,将当前选择项显示在可视范围内。(若所有下拉选项的渲染时间超过300ms,则该功能不会生效,主要是避免影响用户的操作) [*]...

    HTML5表单的基本元素.pdf

    - 属性包括:`name`(提交时的名称)、`form`(关联到外部表单)、`readonly`(只读模式)、`disabled`(禁用)、`maxlength`(最大字符数)、`autofocus`(自动获取焦点)、`placeholder`(占位提示)、`rows`...

    jsp要实现屏蔽退格键问题探讨

    通常select元素的默认状态并不是只读,所以当退格键被按下且元素拥有readonly属性时,可以认为这是下拉框并阻止默认行为。这样的实现方法,虽然可以区分大部分情况,但是它依赖于readonly属性的正确设置,并不是最佳...

    关于handsontable的一些小知识点(个人学习中总结的)

    - **select**:下拉编辑器 - **dropdown**:下拉选择 - **autocomplete**:自动匹配模式 - **handsontable**:表格模式 - **自定义模式** 例如,使用下拉选择类型时,可以这样配置: ```javascript columns: [ {...

    PHP简易计算器,有+-×÷取余功能,包含各种错误检查

    - **表单元素**: 包括输入框 `&lt;input&gt;`、下拉列表 `&lt;select&gt;` 和提交按钮 `&lt;input type="submit"&gt;`。 - **动作属性 (`action`)**: 表示表单提交后数据发送到的页面路径。 - **方法属性 (`method`)**: 指定表单数据的...

Global site tag (gtag.js) - Google Analytics