通过选择的选项更改 div 的值

我必须编写一些代码，其中在选择中有三个选项，并且div的值将在更改时更改为所选项的值，我已经尝试了很多方法和函数，但没有任何效果。这是我当前的代码：

$('select[class="country"]').on('change', function () {
var get = $('select option:selected').text();
$('#fDiv').text = get;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The coolest country</h1>
<select name="country"id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>

请分享有关此代码可能存在问题的任何想法。

使用如下.text()：$('#fDiv').text(myText);

$('select[class="country"]').on('change', function() {
var myText = $('select option:selected').text();
$('#fDiv').text(myText);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The coolest country</h1>
<select name="country" id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>

使用 jQuery，你不使用赋值 =，而是像 ('#id'(.text(get( 一样使用它：

$('select[class="country"]').on('change', function() {
var get = $('select option:selected').val();
$('#fDiv').text(get);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The coolest country</h1>
<select name="country" id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>

这是针对您问题的纯JavaScript解决方案。

const select = document.querySelector('#country');
const div = document.querySelector('#fDiv');
div.innerHTML = select.selectedOptions[0].value // remove this if you dont want a value set initially
select.addEventListener('change', (event) => {
div.innerHTML = select.selectedOptions[0].value
});

<h1>The coolest country</h1>
<select name="country"id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>

1( 在文件开头添加<html>

2(在name = "country" id="country"之间添加一个空格

3( 将 text(( 与参数一起使用：例如$('#fDiv').text(get);

$('select[class="country"]').on('change', function () {
var get = $('select option:selected').text();
$('#fDiv').text(get);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Cool Site</title>
</head>
<body>
<h1>The coolest country</h1>
<select name="country" id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>
</body>
</html>

相关内容

最新更新

热门标签：