Question 265084 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – showing and hiding the span tag on the form based on the drop down list value

I have the following drop down list on my page. I also have a onchange event if someone selects an item from the drop down list. I can see the item index in the onchange event:

  @(Html.Kendo().DropDownList()
                .Name("Awards")
                .Label(label => label.Content("Please select Award type from the list. "))
                .DataTextField("AwardCategory1")
                .DataValueField("AwardId")
                .OptionLabel("Select award")
                
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAwards", "Home");
                    });
                })
              .Events(e => e.Change("onChange"))
            )

This is my onChange event:

<script>
  function onChange(e) {
         var dropdownlist = $("#Awards").data("kendoDropDownList");
         var text = dropdownlist.text();
         $(".award").text(text);
         alert(text);
        
    }

</script>

In the alert, I can see the selected item from the dropdown. I want to display some text on my web page based on the selected item so if text =="Award1" then I want to display

  if (text =="Award1" )
    <h3>"This is the award text for several people. Everyone will be given Award "A"></h3>
    else if (text =="Award2")
    <h3>Test this award. Please make sure, you will be on time</h3>
    else if (text =="Award3")
      .
      .

and so on.

How can I show the "<h3>" tag text on my web page based on the drop down list value. I can successfully capture the drop down list text value in JavaScript, but how can I display a certain text based on the selected item. I tried to put this line in my Javascript function:

$(".award").text(text);

so that I can capture this in tag like this:

<span class="award"></span>

with the above line, I can see the selected award, but I cannot display different text on my web page when a different item is selected. I dont need help with Telerik dropdown, I need help with javascript part.

any help is appreciated.

I tried the solution given below:

function onChange() {
        var dropdownlist = $("#Awards").data("kendoDropDownList");
        var text = dropdownlist.text();
        //$(".award").text(text);
        const award = {
            "Award1": `<h3>This is the award text for several people. Everyone will be given Award "A"></h3>`,
            "Award2": `<h3>Test this award. Please make sure, you will be on time</h3>`,
            "Award3": `<h3>Blablabla</h3>`,
        }[text]
        $(".test").text(award);
        //return { awardText: text };
    }

I have this on the top of my page:

<div id="test">

</div>
Tags:

2

Answers


  1. 0

    Try this:

    <script>
  function onChange(e) {
    const dropdownlist = $("#Awards").data("kendoDropDownList");
    const text = dropdownlist.text();
    const award = {
      "Award1": `<h3>This is the award text for several people. Everyone will be given Award "A"></h3>`,
      "Award2": `<h3>Test this award. Please make sure, you will be on time</h3>`,
      "Award3": `<h3>Blablabla</h3>`,
    }[text]
    $(".award").text(award);
    alert(text);

  }
</script>
    Login or Signup to reply.
  2. 0

    One option, like you lay out yourself, is to change the innerHTML of a div when you select something.

    <html>

<body>
  <div id="output"></div>
  <form name="form01">
    <select name="award">
      <option value="">Select an award</option>
      <option value="a1">Award 1</option>
      <option value="a2">Award 2</option>
      <option value="a3">Award 3</option>
    </select>
  </form>
  <script>
    const output = document.getElementById('output');
    const awardtext = {
      "a1": `<h3>This is the award text for several people. Everyone will be given Award "A"</h3>`,
      "a2": `<h3>Test this award. Please make sure, you will be on time</h3>`,
      "a3": `<h3>Blablabla</h3>`
    };

    document.forms.form01.award.addEventListener('change', e => {
      if (e.target.value) {
        output.innerHTML = awardtext[e.target.value];
      }
    });
  </script>
</body>

</html>

    Another option is to have all the texts already in the document and then hide and show them. In this example I use the subsequent-sibling combinator to style the h3 so that is shows. This is a bit tricky to use because the selectors on each side of the ~ need to be on the same level in the DOM tree.

    .output h3 {
  display: none;
}

form[data-award="a1"]~div.output>h3#a1 {
  display: block;
}

form[data-award="a2"]~div.output>h3#a2 {
  display: block;
}

form[data-award="a3"]~div.output>h3#a3 {
  display: block;
}
    <html>

<body>
  <form name="form01">
    <select name="award">
      <option value="">Select an award</option>
      <option value="a1">Award 1</option>
      <option value="a2">Award 2</option>
      <option value="a3">Award 3</option>
    </select>
  </form>
  <div class="output">
    <h3 id="a1">This is the award text for several people. Everyone will be given Award "A"</h3>
    <h3 id="a2">Test this award. Please make sure, you will be on time</h3>
    <h3 id="a3">Blablabla</h3>
  </div>
  <script>
    document.forms.form01.award.addEventListener('change', e => {
      e.target.form.dataset.award = e.target.value;
    });
  </script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search