干货-HTML中高效获取下拉菜单select中的值

干货:HTML中高效获取下拉菜单select中的值

avaweb

在我们日常的javaweb开发过程中呢，会经常遇到获取表单中的下拉菜单中的value以及他的text，下面我来教大家两种方法。（推荐第二种哈~，希望大家多多评论点赞呀，上一篇文章中，各位猿媛光想着收藏，都看不到你们给我写的评论，桑心~~）

假如我们的select长这样：

<select id="myselect">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>

第一种呢是用我们比较常见的JQuery

var $selected=$("#myselect option").filter(":selected");

获取文本： $selected.text();

获取value: $selected.val();

第二种呢当然是我们的原生js啦~~（推荐哟，收藏评论哈~）

var e=document.getElementById("myselect");

获取文本：var text=e.options[e.selectedIndex].text;

获取value: e.value;

我在后续的文章中，会分享更多更实用的开发小技巧给大家，希望大家多多关注！

html 布局
<div class="select dowebok">
    <span class="placeholder">请选择</span>
    <ul>
        <li>医疗</li>
        <li>保险</li>
        <li>媒体</li>
        <li>银行</li>
    </ul>
</div>

css code
.select {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 325px;
    color: #cccccc;
    vertical-align: middle;
    text-align: left;
    user-select: none;
    -webkit-touch-callout: none;
}
.select .placeholder {
    position: relative;
    display: block;
    background-color: #393d41;
    z-index: 1;
    padding: 1em;
    border-radius: 2px;
    cursor: pointer;
}
.select .placeholder:hover {
    background: #34383c;
}
.select .placeholder:after {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FontAwesome';
    content: '\f078';
    z-index: 10;
}
.select.is-open .placeholder:after {
    content: '\f077';
}
.select.is-open ul {
    display: block;
}
.select.select--white .placeholder {
    background: #fff;
    color: #999;
}
.select.select--white .placeholder:hover {
    background: #fafafa;
}
.select ul {
    display: none;
    position: absolute;
    overflow: hidden;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    z-index: 100;
}
.select ul li {
    display: block;
    text-align: left;
    padding: 0.8em 1em 0.8em 1em;
    color: #999;
    cursor: pointer;
}
.select ul li:hover {
    background: #4ebbf0;
    color: #fff;
}

JS code
$('.cooperation-topic .select').on('click', '.placeholder', function(e) {
    var parent=$(this).closest('.select');
    if (!parent.hasClass('is-open')) {
        parent.addClass('is-open');
        $('.cooperation-topic .select.is-open').not(parent).removeClass('is-open');
    } else {
        parent.removeClass('is-open');
    }
    e.stopPropagation();}).on('click', 'ul>li', function() {
    var parent=$(this).closest('.select');
    parent.removeClass('is-open').find('.placeholder').text($(this).text());
    parent.find('input[type="hidden"]').val($(this).attr('date-value'));
});
 
$('body').on('click', function() {
    $('.cooperation-topic .select.is-open').removeClass('is-open');
});

表单input：表单是用来收集信息的，由表单控件(表单元素)、提示信息、表单域构成。

input控件的属性及值：

除以上属性外，input元素type属性还有一个number属性值，此为仅可以填数字，默认是可以选择或者填写任意数字，但是当type属性为number属性值时，可以使用max和min属性来限制数字的取值范围，input更多属性见HTML5

 <input type="number" min="0"> <!-- min属性限定最小值为0 -->

label标签：

label标签是为input标签服务的，用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点


    <label> <!-- 1、直接使用label标签包裹要点击的元素获得焦点 -->
        姓名：<input type="text">
    </label>
    
    <label for="name">姓名：</label> <!-- 2、使用label标签的for属性找input元素获得焦点 -->
    <input id="name" type="text"/>

表单域form：

form元素用于创建一个表单，form中的所有内容都会被提交给服务器;默认form标签中需要有一个submit按钮，如果form里面没有submit按钮，那么可以使用button中type属性为submit的button按钮，这个buttont按钮可能不在form表单中，此时可以给type属性值为submit的button添加form属性，值为form表单的id值，如：


     <form action="" method="get" name="" id="userform"> <!-- action属性是指定表单提交给后端的地址，method属性设置提交方式，其属性值有post和get,name属性用来给表单域定义名字，用于区分表单域 -->
      姓名：<input type="text">
      年龄：<input type="number" min="0">
    </form>
    <button type="submit" form="userform">提交</button>

文本域textarea：

input元素只能显示一行内容，textarea元素可以显示多行，一般做留言效果使用，常常被称为富文本域。


     <!-- rows属性限定行数，当行数超过限定后会出现滚动条，cols属性限定的是列数，当超过限定后会换行。 -->
    <textarea cols="20" rows="10"></textarea>

UEditor：在实际开发中如果需要用到比较复杂的富文本域（类似word的，可以上传视频图片等功能）推荐使用第三方插件，这里推荐大家一款使用的富文本插件：UEditor,使用它可以在网页中实现类似word等编辑，如果想要了解更多及方法请查阅官方文档：http://fex.baidu.com/ueditor/，当然类似的富文本编辑器还有很多，如：CKeditor：https://ckeditor.com/等

富文本编辑器可以自己做，其原理是利用document的execCommand()方法，这个方法实际开发中很少用，已经废弃，所以一般很少有人了解，如果想要了解更多，可阅读官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

下拉列表(下拉菜单)select：


    <body>
        <select name="" id="">
            <optgroup value="" label="分组1"><!-- optgroup标签用来分组 -->>
                <option value="">
                    测试1
                </option>
                <option value="">
                    测试2
                </option>
                <option value="">
                    测试3
                </option>
            </optgroup>
            <optgroup value="" label="分组2">
                <option value="">选项1</option> <!-- select默认选择第一个option，当给option加selected属性时，则会选中此项显示 -->
                <option value="" selected="selected">选项2</option> <!-- selected属性的selected属性值可以省略，其效果不变-->
                <option value="">选项3</option>
            </optgroup>
          </select>
    </body>

块引用标签：

有的时候会引用名人名言等，此时建议使用引用标签，引用标签分为长引用和短引用两种，长引用标签效果是插入换行和外边距，短引用标签的效果是加上虚拟的引号。


    <blockquote>海上生明月，天涯共此时。</blockquote><!-- 长引用标签 -->
    
    <q>引号</q><!-- 段引用会给内容加上虚拟的引号，这个引号根本不存在。 -->

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。

笔者：苦海123

其它问题可通过以下方式联系本人咨询：

QQ：810665436

微信：ConstancyMan

在线咨询

上一篇：高考录取期间，考生须注意这十件事
下一篇：一种手机屏幕转文字的OCR技术方案

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

干货-HTML中高效获取下拉菜单select中的值

您的项目需求