一、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表單，並把表單中的內容顯示出來。

onsubmit=“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);
          })