获取HTML网页中option标签元素的值

呆呆

修改于 2021-10-09 10:04:05

7.5K0

修改于 2021-10-09 10:04:05

文章被收录于专栏：centosDai

在进行表单元素的操作时，难免会遇到对option元素的挑选，下面的示例代码能够很好的获取到你option元素选择的值，如果要传递给后端，可通过ajax或者其他方式传递即可。 示例代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取option元素</title>
</head>

<body>
  <div class="item-content">
	<div class="item-inner">
	  <div class="item-title label">编程语言</div>
	  <div class="item-input">
		<select id="program-language">
			<option data-id="Java">Java</option>
			<option data-id="Python">Python</option>
			<option data-id="Android">Android</option>
			<option data-id="C#">C#</option>
			<option data-id="Ruby">Ruby</option>
			<option data-id="JavaScript">JavaScript</option>
		</select>
	</div>
  </div>
  
	<div class="content-block">
      <div class="row">
        <div class="col-50">
			<a href="#" class="button button-big button-fill button-success" id="submit">提交</a>
		</div>
      </div>
    </div>
  
<script type='text/javascript' src='C:/Users/Hyxiao/Desktop/option/jquery-3.2.1.js' charset='utf-8'></script>
<script type='text/javascript'>
	$('#submit').click(function() {
		var  language = '';
		language = 
			$('#program-language').find('option').not(function() {
				return !this.selected;
			}).data('id')
		console.log(language);
	});
</script>
  
</body>
</html>

效果图如下：