CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
Mango
Mango

Reputation: 59

display HTML according to selected option

First of all, let me say I am trying to modify existing code and I am pretty unfamiliar with jquery so the script part is probably way off.

I'd have a select menu with integers for values, and when they are selected I would like to set the HTML inside the span id "stylediv"

javascript:

<script> 
function styleselect() {
    if (document.getElementById('globalstyleselect').value == "3") {
    $(".stylediv").html('<b>Boca Style</b>');
  } 
    if (document.getElementById('globalstyleselect').value == "2") {
    $(".stylediv").html('<b>Bella Style</b>');} 
} 
    if (document.getElementById('globalstyleselect').value == "1") {
    $(".stylediv").html('<b>Terra Style</b>');
} 
</script>

Html:

<select id="globalstyleselect" onchange="styleselect()">
<option value="1">Terra</option>
<option value="2">Bella </option>
<option value="3">Boca</option>
</select>


<span id="stylediv">Text to display here</span>

Upvotes: 2

Views: 5404

Answers (2)

user10108359
user10108359

Reputation:

In jQuery, # is for selecting by id and . is for selecting by class. I would also recommend you run your function on window load so the initial value for the select is displayed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="globalstyleselect" onchange="styleselect()">
<option value="1">Terra</option>
<option value="2">Bella </option>
<option value="3">Boca</option>
</select>


<span id="stylediv">Text to display here</span>
<script> 
$(window).load(function(){
 styleselect();
})
function styleselect() {
    if (document.getElementById('globalstyleselect').value == "3") {
    $("#stylediv").html('<b>Boca Style</b>');
  } 
    if (document.getElementById('globalstyleselect').value == "2") {
    $("#stylediv").html('<b>Bella Style</b>');} 
} 
    if (document.getElementById('globalstyleselect').value == "1") {
    $("#stylediv").html('<b>Terra Style</b>');
} 
</script>

Upvotes: 0

lealceldeiro
lealceldeiro

Reputation: 14958

Change this $(".stylediv") for this $("#stylediv") since .stylediv means all elements which have class stylediv and #stylediv all elements which have id stylediv.

In your case you have a div with this id (<span id="stylediv">Text to display here</span>), so you must use the id selector.

Also I recommend you not to repeat the same selector so many times (this is error-prone); instead get it inside a variable and use it... and keep consistency in the code: if you're using jQuery get all elements with jQuery (though this is a matter of preferences)

See below snippet with the js improved too.

function styleselect() {
  var value = $('#globalstyleselect').val();
  var div = $("#stylediv");
  if (value == "3") {
    div.html('<b>Boca Style</b>');
  }
  if (value == "2") {
    div.html('<b>Bella Style</b>');
  }
  if (value == "1") {
    div.html('<b>Terra Style</b>');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="globalstyleselect" onchange="styleselect()">
  <option value="1">Terra</option>
  <option value="2">Bella </option>
  <option value="3">Boca</option>
</select>


<span id="stylediv">Text to display here</span>

Upvotes: 2

Related Questions