Jquery 和JS获取下拉列表的值

<svg style="display: none;">
 <path d="M5,0 0,2.5 5,5z" id="raphael-marker-block" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
 </svg>
 <h2 id="一javascript获取下拉列表的选中的文本和值">一、Javascript获取下拉列表的选中的文本和值</h2>

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

<h4 id="html片段">html片段</h4>

<pre class="blockcode"><code class="hljs xml"><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></code></pre>

<h4 id="javascript代码">javascript代码</h4>

<pre class="blockcode"><code class="hljs avrasm"> 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]);
 }</code></pre>

<h4 id="效果图">效果图：</h4>

<img alt="这里写图片描述" src="https://201907.oss-cn-shanghai.aliyuncs.com/cs/5606289-bf761e25a5528115bd6ff4dd0282ff3d" title="">

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

<h2 id="二jquery获取下拉列表的选中的文本和值">二、Jquery获取下拉列表的选中的文本和值</h2>

<h4 id="html片段同上">html片段同上</h4>

<h4 id="javascript片段">javascript片段</h4>

<pre class="blockcode"><code class="hljs javascript"> $(function(){
 $("#fruit").change(function(){
 value=$("#fruit option:selected").val();
 text=$("#fruit option:selected").text();
 $("p").text(<span class="hljs-string

Jquery 和JS获取下拉列表的值

浏览过的版块