`
xxtianxiaxing
  • 浏览: 707295 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
社区版块
存档分类
最新评论

<select> <option>

    博客分类:
  • web
阅读更多
<select id="id">
   <option value="1">你好</option>
</select>
var i =document.getElementById("id");
document.getElementById("id").options[i.selectIndex].text




<form id="f">
<select size="1" name="s">
<option value="lizi.name">梨子面馆</option>
<option value="baidu.com">百度</option>
</select>
</form>


<script type="text/javascript">
<!--
var f = document.getElementById("f");

//获得select列表项数目
document.write(f.s.options.length);
document.write(f.s.length);

//当前选中项的下标(从0 开始)(有两种方法)
//如果选择了多项,则返回第一个选中项的下标
document.write(f.s.options.selectedIndex);
document.write(f.s.selectedIndex);

//检测某一项是否被选中
document.write(f.s.options[0].selected);

//获得某一项的值和文字
document.write(f.s.options[0].value);
document.write(f.s.options[1].text);

//删除某一项
f.s.options[1] = null;

//追加一项
f.s.options[f.s.options.length] = new Option("追加的text", "追加的value");

//更改一项
f.s.options[1] = new Option("更改的text", "更改的value");
//也可以直接设置该项的 text 和 value
//-->
</script>


//全选列表中的项
function SelectAllOption(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = true;
}
}


//反选列表中的项
function DeSelectOptions(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = !list.options[i].selected;
}
}


//返回列表中选择项数目
function GetSelectedOptionsCnt(list)
{
var cnt = 0;
var i = 0;
for (i=0; i<list.options.length; i++)
{
if (list.options[i].selected)
{
cnt++;
}
}

return cnt;
}


//清空列表
function ClearList(list)
{
while (list.options.length > 0)
{
list.options[0] = null;
}
}


//删除列表选中项
//返回删除项的数量
function DelSelectedOptions(list)
{
var i = 0;
var deletedCnt = 0;
while (i < list.options.length)
{
if (list.options[i].selected)
{
list.options[i] = null;
deletedCnt++;
}
else
{
i++;
}
}

return deletedCnt;
}
//此函数查找相应的项是否存在
//repeatCheck是否进行重复性检查
//若为"v",按值进行重复值检查
//若为"t",按文字进行重复值检查
//若为"vt",按值和文字进行重复值检查
//其它值,不进行重复性检查,返回false
function OptionExists(list, optText, optValue, repeatCheck)
{
var i = 0;
var find = false;

if (repeatCheck == "v")
{
//按值进行重复值检查
for (i=0; i<list.options.length; i++)
{
if (list.options[i].value == optValue)
{
find = true;
break;
}
}
}
else if (repeatCheck == "t")
{
//按文字进行重复检查
for (i=0; i<list.options.length; i++)
{
if (list.options[i].text == optText)
{
find = true;
break;
}
}
}
else if (repeatCheck == "vt")
{
//按值和文字进行重复检查
for (i=0; i<list.options.length; i++)
{
if ((list.options[i].value == optValue) && (list.options[i].text ==

optText))
{
find = true;
break;
}
}
}

return find;
}


//向列表中追加一个项
//list 是要追加的列表
//optText 和 optValue 分别表示项的文字和值
//repeatCheck 是否进行重复性检查,参见 OptionExists
//添加成功返回 true,失败返回 false
function AppendOption(list, optText, optValue, repeatCheck)
{
if (!OptionExists(list, optText, optValue, repeatCheck))
{
list.options[list.options.length] = new Option(optText, optValue);
return true;
}
else
{
return false;
}
}


//插入项
//index 插入位置,当插入位置 >= 列表现有项数量时,其作用相当于不进行重复检

查的追加项
//optText 和 optValue 分别表示项的文字和值
function InsertOption(list, index, optText, optValue)
{
var i = 0;
for (i=list.options.length; i>index; i--)
{
list.options[i] = new Option(list.options[i-1].text, list.options[i-

1].value);
}

list.options[index] = new Option(optText, optValue);
}
//将一个列表中的项导到另一个列表中
//repeatCheck是否进行重复性检查,参见OptionExists
//deleteSource项导到目标后,是否删除源列表中的项
//返回影响的项数量
function ListToList(sList, dList, repeatCheck, deleteSource)
{
//所影响的行数
var lines = 0;
var i = 0;
while (i<sList.options.length)
{
if (sList.options[i].selected && AppendOption(dList, sList.options[i].text,

sList.options[i].value, repeatCheck))
{
//添加成功
lines++;
if (deleteSource)
{
//删除源列表中的项
sList.options[i] = null;
}
else
{
i++;
}
}
else
{
i++;
}
}

return lines;
}


//列表中选中项上移
function MoveSelectedOptionsUp(list)
{
var i = 0;
var value = "";
var text = "";
for (i=0; i<(list.options.length-1); i++)
{
if (!list.options[i].selected && list.options[i+1].selected)
{
value = list.options[i].value;
text = list.options[i].text;
list.options[i] = new Option(list.options[i+1].text, list.options

[i+1].value);
list.options[i].selected = true;
list.options[i+1] = new Option(text, value);
}
}
}


//列表中选中项下移
function MoveSelectedOptionsDown(list)
{
var i = 0;
var value = "";
var text = "";
for (i=list.options.length-1; i>0; i--)
{


if (!list.options[i].selected && list.options[i-1].selected)
{
value = list.options[i].value;
text = list.options[i].text;
list.options[i] = new Option(list.options[i-1].text, list.options[i-

1].value);
list.options[i].selected = true;
list.options[i-1] = new Option(text, value);
}
}
} 
分享到:
评论

相关推荐

    向元素中动态添加option

    接下来,要将这个新创建的`&lt;option&gt;`元素添加到`&lt;select&gt;`元素中,我们需要找到目标`&lt;select&gt;`元素,这通常通过其`id`属性完成,例如:`var selectElement = document.getElementById('selectId')`。之后,使用`....

    javascript 获取select ->option中id、value、label属性及中内容

    javascript 获取select -&gt;option中id、value、label属性及&lt;option&gt;&lt;/option&gt;中内容

    联动组件JAVA<select>代码

    &lt;option value="option1"&gt;Option 1&lt;/option&gt; &lt;option value="option2"&gt;Option 2&lt;/option&gt; &lt;/select&gt; ``` 2. **JavaScript 事件处理**: 要实现联动效果,我们需要监听第一个&lt;select&gt;元素的`onchange`事件。当...

    固定宽度下拉列表select中option内容显示不全问题解决方法

    在网页设计中,`&lt;select&gt;`元素和其子元素`&lt;option&gt;`经常被用来创建下拉列表,供用户选择。然而,在某些情况下,特别是在固定宽度的`&lt;select&gt;`元素中,如果`&lt;option&gt;`的内容过长,可能会导致内容显示不全,只显示部分...

    如何获取select下拉框的值(option没有及有value属性)

    &lt;option&gt;学号&lt;/option&gt; &lt;option&gt;姓名&lt;/option&gt; &lt;option&gt;年龄&lt;/option&gt; &lt;/seclect&gt; [removed] [removed] = funciton(){ var param = document.getElementById(“param1”); param.onchange = getParam(){ var text =...

    使用js实现 年月日绑定html 控件上

    3. **事件监听:** 为每个`&lt;select&gt;`元素添加事件监听器,以便在用户选择时更新其他两个`&lt;select&gt;`元素的选项。 4. **日期计算:** 通过JavaScript计算每个月的具体天数,并据此更新日期`&lt;select&gt;`元素的选项。 ###...

    JSP自定义标签(封装<select>标签)

    然后,我们可以遍历这个数组,为每个元素生成一个`&lt;option&gt;`标签,添加到`&lt;select&gt;`标签中。 3. **定义标签库描述符(TLD)**: TLD文件(通常以`.tld`为扩展名)是XML格式的,用于定义自定义标签的元数据。在TLD中...

    Jquery实现的的动态无刷新的二级联动菜单

    然后遍历对象,使用jQuery的`append()`方法动态创建新的&lt;option&gt;元素,并添加到二级&lt;select&gt;中。 6. **更新视图**:最后,二级菜单的内容更新完毕,用户即可看到相应的二级选项。 这个示例代码不仅展示了jQuery的...

    select将选中的option设置为默认选项

    在网页开发中,`&lt;select&gt;`元素用于创建下拉列表,而`&lt;option&gt;`标签则定义了下拉列表中的选项。有时候,我们可能需要在页面加载时预设一个选项为默认选中状态,或者根据用户操作动态改变选中状态。在JavaScript中,这...

    jsp select 带多选框

    &lt;option value="option1"&gt;选项1&lt;/option&gt; &lt;option value="option2"&gt;选项2&lt;/option&gt; &lt;option value="option3"&gt;选项3&lt;/option&gt; &lt;option value="option4"&gt;选项4&lt;/option&gt; &lt;option value="option5"&gt;选项5&lt;/option&gt; ...

    Jquery操作select标签例子

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括对`&lt;select&gt;`标签的操作。本文将详细讲解如何使用jQuery来管理HTML中的`&lt;select&gt;`元素,包括选择、更改选项,获取选中项的文本、值...

    Query实现的<select>动态二级联动菜单

    本文将详细讲解如何利用jQuery、Ajax和JSON来实现一个无刷新的动态二级联动菜单,该功能基于`&lt;select&gt;`元素,提供优秀的用户体验。 首先,我们需要了解jQuery库,它是一个强大的JavaScript库,简化了DOM操作、事件...

    [JavaScript]Javascript 设置与读取Co 三级select列表

    4. 更新DOM:清除第二级`&lt;select&gt;`的所有选项,然后为每个新的第二级选项创建`&lt;option&gt;`元素,并添加到`&lt;select&gt;`中。 5. 如果有第三级,重复步骤3和4,但这次针对第二级的`&lt;select&gt;`。 在实际项目中,可能还需要...

    bootstrap-select下拉选择搜索框,可以多选和单选

    2. **HTML结构**:在HTML中创建`&lt;select&gt;`元素,为每个可选项添加`&lt;option&gt;`标签。如果需要支持多选,可以添加`multiple`属性。 3. **初始化插件**:通过调用JavaScript的`$(selector).selectpicker()`方法,将普通...

    select option带自定义图片

    以下是一个关于如何在`&lt;select&gt;`和`&lt;option&gt;`中添加自定义图片的详细教程。 首先,我们需要理解HTML基础。`&lt;select&gt;`元素创建一个可选列表,用户可以选择其中的一个或多个选项。`&lt;option&gt;`元素定义了下拉列表中的一...

    jQuery Select 上移下移

    实现“jQuery Select 上移下移”的核心是通过DOM操作来改变`&lt;option&gt;`元素的顺序。首先,你需要监听用户的点击事件,如按钮点击,然后根据用户的选择(上移或下移)找到相应的`&lt;option&gt;`元素并调整其位置。 以下是...

    自定义带图标的select,只需把图标地址写在option的title属性中即可

    这个JS插件就是为了解决这个问题,它扩展了`&lt;select&gt;`的功能,允许我们在`&lt;option&gt;`的`title`属性中插入图标地址,然后在界面上动态渲染这些图标。 接下来,我们要探讨如何使用这个插件。在项目中,首先需要引入...

    select级联下拉列表

    $('#city').append('&lt;option value="' + city.id + '"&gt;' + city.name + '&lt;/option&gt;'); }); }); }); // 假设getCityData函数返回对应省份的城市数组 function getCityData(provinceId) { // 实际应用中,应从...

    三级下拉列表 select 网页 html5

    &lt;option&gt;Option 1&lt;/option&gt; &lt;option&gt;Option 2&lt;/option&gt; &lt;option&gt;Option 3&lt;/option&gt; &lt;/select&gt; ``` 然而,对于学院-专业-班级这样多层次的选择,单个`&lt;select&gt;`无法满足需求。这时,我们需要使用多个`&lt;select&gt;`...

    HTML5&CSS3网页制作:select元素.pptx

    通过`&lt;select&gt;`和`&lt;option&gt;`的组合,你可以创建出各种定制化的下拉列表,满足不同场景的需求,比如在用户注册表单中提供职业选择,或者在调查问卷中设置多选题等。在实际开发中,还可以结合JavaScript进行更复杂的...

Global site tag (gtag.js) - Google Analytics