JS和Jquery获取选中select值和文本

淡淡的烟草味﹌ 2022-07-12 03:25 229阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS和Jquery获取选中select值和文本</title>
    </head>
    
    <body>
    <form name="form1" id="form1" method="post" action="XX">
      <input name="gettext" id="gettext" value="" type="hidden" />
      <input name="getvalue" id="getvalue" value="" type="hidden" />
      
      <select name="PaymentType" style="width:110px" οnchange="GettextAndValue2(this)">
        <option value="">请选择 </option>
        <option value="001">月付</option>
        <option value="002">半年付</option>
        <option value="003">年付</option>
      </select>
    </form>
    <p><a href="javascript:;" οnclick="subform();">DOM</a></p>
    <p><a href="javascript:;" οnclick="subform2();">JQ</a></p>
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script language="javascript">
    //DOM原生获取select选中下拉框的的值和文本
    function GettextAndValue(obj){
    	var txt=obj.options[obj.options.selectedIndex].text;
    	var val=obj.options[obj.options.selectedIndex].value;
    	document.getElementById("gettext").value = txt;
    	document.getElementById("getvalue").value = val;
    }
    //DOM原生表单提交
    function subform(){
    	alert(document.getElementById("gettext").value);
    	alert(document.getElementById("getvalue").value);
    	document.getElementById("form1").submit();	
    }
    
    //JQ获取select选中下拉框的的值和文本
    function GettextAndValue2(obj){
    	var txt=$(obj).find("option:selected").text();
    	var val=$(obj).find("option:selected").val();
    	$("#gettext").val(txt);
    	$("#getvalue").val(val);
    }
    //JQ表单提交
    function subform2(){
    	alert($("#gettext").val());
    	alert($("#getvalue").val());
    	$("#form1").submit();	
    }
    </script>
    </body>
    </html>