Jquery 和JS获取下拉列表的值

一、Javascript获取下拉列表的选中的文本和值

select option 在前端是经常用到的表单元素，option里面的值一般是用来和后台交互的。那么如何来获取选中的文本和值呢？

html片段

<div style="width:300px;height:200px;margin:0 auto">
        <select name="select" id="fruit" style="width:100px;height:30px;">
          <option value="apple">苹果option>
          <option value="banana">香蕉option>
          <option value="orange">橘子option>
        select>    
        <p>p>
div>

javascript代码

 var fruit=document.getElementById("fruit");
          var option=document.getElementsByTagName("option");
          var p=document.getElementsByTagName("p")[0];
          fruit.onchange=function(){
                p.innerText="你选择的水果是"+option[fruit.selectedIndex].innerText+"值为"+
                                      option[fruit.selectedIndex].value;
                 console.log(option[fruit.selectedIndex]);
          }

效果图：

这边用到了一个叫做onchang()的方法，当下拉列表的值发生变化时将会触发事件，把选中的文本和值显示在p的文本中。通过selectedIndex可以获取当前option的索引值(看图中控制台的输出)，option的innerText属性获取文本值，value属性获取value值。

二、Jquery获取下拉列表的选中的文本和值

html片段同上

javascript片段

  $(function(){
           $("#fruit").change(function(){
                  value=$("#fruit option:selected").val();
                  text=$("#fruit option:selected").text();
                  $("p").text("你选中的是"+text+"值为"+value);

           })
      })

效果图：

jquery写起来就简洁多了，可以看出来jquery的选择器好方便。使用text()方法获取文本值，val()方法获取value值。注意jquery是没有value()方法的不要和javascript搞混掉了。

2. 三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

html代码：

<div style="width:300px;height:200px;margin:0 auto">
       <input type="text" style="height:20px">
       <p id="p1">今天"海马"要来啦~~~<span>长这么大还没见过台风span>p>
        <button class="btn">显示button>
        <p class="mes1" style="color:red">p>
        <p class="mes2"  style="color:blue">p>
        <p class="mes3"  style="color:green">p>
div>

javascript代码：

  $(".btn").click(function(){
                $(".mes1").text("输入框的值是:"+$("input").val());
                $(".mes2").text("p标签的文本是:"+$("#p1").text());
                $(".mes3").text("p标签调用html()方法:"+$("#p1").html());
          })

为了方便，这里用来三个p标签来显示调用方法的结果。从图中看可以看出val()方法主要是获取value值，text()为对应的文本值相当于js的innerText,html()会把文本值包括子元素的标签输出相当于js的innerHTML.

3.一个简单的小例子

填写一个form表单，并把表单中的内容显示出来。

οnsubmit=“return false”是为了阻止form表单的提交事件，便于我们在例子中查看效果。
$(":checkbox:checked").each(function(){
interest.push($(this).val());
})
这段代码是用each()方法遍历选中的多选框，然后把它们的值push到一个叫做interest的数组中。
在radio设置属性name为相同的，是为了把几个radio归为一组。单选框radio如果name属性不相同的话，那么性别中“男”和“女”可以同时选中，显然这是不合理的。

html代码：

<div style="width:300px;height:200px;margin:0 auto">
    <form onsubmit="return false">
          <fieldset>
                <legend><h2>个人信息h2>legend>
                    <h4>基本信息h4>
                    <p>
                           <label>姓名label>
                          <input type="text" id ="name" placeholder="请输入你的姓名">p>        
                     <p>
                          <label>身高label>
                           <input type="text" id="high" placeholder="请输入你的身高">p>   
                    <p>
                           <label>体重label>
                          <input type="text" id="weight" placeholder="请输入你的体重">p>

                    <h4>性别h4>
                   <input type="radio" value="man" name="sex">男
                   <input type="radio" value="woman" name="sex">女
                   <h4>兴趣h4>
                    <input type="checkbox"  name="interest" value="basketball">篮球
                    <input type="checkbox" name="interest" value="climbing">爬山
                    <input type="checkbox" name="interest" value="swimming">游泳
                    <input type="checkbox" name="interest" value="eating">吃饭

                       <button class="btn"  style="margin-top:10px">提交button>
          fieldset>
    form>
      <p class="mes">p>
div>

javascript代码：

  $(".btn").click(function(){
             var interest=[];          
             name=$("#name").val()            
             high= $("#high").val();
             weight=$("#weight").val();
             sex=$("input:radio:checked").val();
              $(":checkbox:checked").each(function(){
                    interest.push($(this).val());
              })
                $(".mes").text(name+"性别："+sex+"。身高为："+high+"。体重为："+weight+"。兴趣："+interest);
          })