CODEWITHSUNDEEP
javascripthtml
huntrese
huntrese

Reputation: 25

changing a div's value by a select's option

I have to write some code where in a select there are three options and the value of a div will change to the selected item's value when it is changed, I have tried quite a lot of methods and functions but nothing worked. this is my current code :

$('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>

Please share any ideas of what could be wrong with this code.

Upvotes: 0

Views: 45

Answers (4)

King11
King11

Reputation: 1229

1) Add <html> at the start of your file

2) Add a space in between name = "country" id="country"

3) Use text() with a parameter: such as $('#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>

Upvotes: 0

MichaelvE
MichaelvE

Reputation: 2578

With jQuery, you don't use the assignment =, you use it like ('#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>

Upvotes: 1

Smokey Dawson
Smokey Dawson

Reputation: 9230

Here is a pure javascript solution to your issue.

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>

Upvotes: 0

Taki
Taki

Reputation: 17654

use .text() like : $('#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>

Upvotes: 1

Related Questions