-1

I want to use a form selector as shown, and depending on the option selected, a different output. Simple, yet I am not getting it to work. Here is what I have.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){ 

    if ("#1") {
        $("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">1</td><td width="64">80</td><td width="93">32</td></tr></tbody></table>");
    } 
    if ("#2") {
        $("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">2</td><td width="64">88</td><td width="93">36</td></tr></tbody></table>");
    }

});
</script>

</head>

<body>
<div>
   <form id="option">
  <label for="level">Level at a glance:</label>
  <select name="level" id="level">
    <option id="1">1</option>
    <option id="2">2</option>

  </select>
</form>
<div id="display">
</div>
</div>
</body>
</html>
Kyle Schmelzer
  • 153
  • 10
  • Possible duplicate of [How to check if an option is selected?](http://stackoverflow.com/questions/10213620/how-to-check-if-an-option-is-selected) – tanaydin Sep 18 '16 at 20:05
  • You can't use only integer for id. Add something to it like and then check it with #opt1, #opt2 – tanaydin Sep 18 '16 at 20:06
  • Not a duplicate, and that answer sadly was not a solution. Same result of nothing showing up. – Kyle Schmelzer Sep 18 '16 at 20:11
  • Also, your script works on page load, you have to trigger it after something happened. Like onchange or onselect etc. – tanaydin Sep 18 '16 at 20:17
  • Valid point. I tried to add $( "#level" ).select(function() as well as $( "#option" ).select(function() { both with and without the document onload. None of it is working. I can tell im close to this thing working, but just some simple things not allowing it to work yet. – Kyle Schmelzer Sep 18 '16 at 20:26

2 Answers2

1

Your javascript conditions are executed once, when the document is ready. You have to add an event, when the select value change !

Add some values in your option elements ( <option value="1">1</option> )

$(document).ready(function(){
  // Set event
  $("#level").change(function(){
    if ($(this).val() === "1") {
      $("#display").html(...);
    } else {
      $("#display").html(...);
    }
  }
  // Call event when document loaded
  $("#level").change();
});
Robiseb
  • 1,576
  • 2
  • 14
  • 17
1

There were a couple issues here.

  • First of all, "#1" and "#2" are always going to == true, since they are strings.
  • Second, the code that changes the text only happens once, on page load. There is nothing telling it to update after the menu is changed.
  • Third, on the lines starting with $("#display").html...., you had what should have been a very long string, but you broke it up by using double quotes every time. You need to switch between single and double quotes. If I say, "class="potato">", it sees "class=" as one string, and ">" as another, but it doesn't know what to do with potato. You need to use single quotes, like "class='potato'>" or 'class="potato">'.

This is the fixed code:

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function changeText(){
    if ($("#level option:selected").text() == "1") {
        $("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>1</td><td width='64'>80</td><td width='93'>32</td></tr></tbody></table>");
    } 
    if ($("#level option:selected").text() == "2") {
        $("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>2</td><td width='64'>88</td><td width='93'>36</td></tr></tbody></table>");
    }
}
$(document).ready(function(){ 
    changeText();
});
</script>

</head>

<body>
<div>
   <form id="option">
  <label for="level">Level at a glance:</label>
  <select name="level" id="level" onchange="changeText()">
    <option id="1" >1</option>
    <option id="2">2</option>

  </select>
</form>
<div id="display">
</div>
</div>
</body>
Howzieky
  • 829
  • 7
  • 18