CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Vynxz
Vynxz

Reputation: 47

How to show content from drop down(option)

What i am trying to do is to create a user drop down list (option)

When a user select option from down down it will show its content/comment on a text area

<Option id="1"> Cancel </option>
<Option id="2"> Renew </option>     
<P><div id="1"> this is content of cancellation</p></div>

So when the user select the cancel it will show its content in a text area or pharagraph area

Upvotes: 0

Views: 41

Answers (2)

Hien Nguyen
Hien Nguyen

Reputation: 18975

This is jquery version, you should not use same id with option and div for cancel text.

I also recommend you use option with value instead of id="1", in this case you did not set value for option so it get text as option value.

$("#myoption").change(function(){
      var selected = $(this).val();
      if(selected == "Cancel"){

        $('textarea').text($('#canceltext').text());
      }else{
        $('textarea').text(selected);
      }
    })


$("#myoption").change(function(){
  var selected = $(this).val();
  if(selected == "Cancel"){
  
    $('textarea').text($('#canceltext').text());
  }else{
    $('textarea').text(selected);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myoption">
<option value="">Select...</option>
<option id="1"> Cancel </option>
<option id="2"> Renew </option>    
</select>
<div id="canceltext"><p>this is content of cancellation</p></div>
<textarea></textarea>

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44107

Listen for a change on the select then set the textContent of the div:

document.getElementById("select").addEventListener("change", () => {
  document.getElementById("myDiv").textContent = document.getElementById("select").value;
});
<select id="select">
  <option id="1" value="Cancel"> Cancel </option>
  <option id="2" value="Renew"> Renew </option>
</select>
<div id="myDiv">Replacement Text</div>

Upvotes: 0

Related Questions