Show Text Based On Option Selected In Dropdown

I have a dropdown like below. TitleFeature 1

Solution 1:

Give the p tags the id as the value of the options, and show the p tag when selected option has the value which is equal to the id of p

$('p').hide();
$('#1').show();
$('select').change(function() {
$('p').hide();
  var a = $(this).val();
  $("#" + a).show();
})

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><labelfor="form_name">Title</label><selectclass="bootstrap-select"><optionvalue="1"selected="selected">Feature 1</option><optionvalue="2">Feature 2</option><optionvalue="3">Feature 3</option><optionvalue="4">Feature 4</option></select><div><pid="1">Text1</p></div><div><pid="2">Text2</p></div><div><pid="3">Text3</p></div><div><pid="4">Text4</p></div>

Solution 2:

functiondisplay(){
    var e = document.getElementById("dropDownId");
    var index = e.selectedIndex;
    if(index==0){
        document.getElementById("first").style.display = 'block'document.getElementById("second").style.display = 'none'
    }
    elseif(index==1){
        document.getElementById("first").style.display = 'none'document.getElementById("second").style.display = 'block'
    }
}

<labelfor="form_name">Title</label><selectclass="bootstrap-select"id="dropDownId"onchange="display()"><optionvalue="1"selected="selected">Feature 1</option><optionvalue="2">Feature 2</option></select><divid="first"><p>Text1</p></div><divid="second"style="display: none;"><p>Text2</p></div>

Please run this snippet..and check out your solution..

Solution 3:

With pure javascript

let select = document.querySelector("select");
let divs = document.querySelectorAll("div");
let result = document.querySelector("#result");

functionfunc1(par){
  result.innerText = divs[par - 1].innerText;
}

div:not(#result) {
  display:none;
}

<labelfor="form_name">Title</label><selectclass="bootstrap-select"onchange="func1(this.value)"><optionvalue="1"selected="selected">Feature 1</option><optionvalue="2">Feature 2</option><optionvalue="3">Feature 3</option><optionvalue="4">Feature 4</option></select><div><p>Text1</p></div><div><p>Text2</p></div><div><p>Text3</p></div><div><p>Text4</p></div><divid="result"></div>

Solution 4:

You can use ids on your div that you want to show and change the value of your select with the ids you choosed

$("#select-panel").change(function(){
   updateDisplay();
})

functionupdateDisplay(){
  var idToShow = $("#select-panel").find(":selected").val() || "div1";
   $(".subcontent").each(function(){
      $(this).css("display",$(this).is("#"+idToShow) ? 'block' : 'none');
   })
}

updateDisplay();

.subcontent{
display:none;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><selectid="select-panel"><optionvalue="div1">1</option><optionvalue="div2">2</option></select><divid="div1"class="subcontent">Text 1</div><divid="div2"class="subcontent">Text 2</div>

Share

Top Question

Function To Be Called Once Div Hits Top Of Viewport Window

Wondering if you could have a look at the below code. Im wa…

Webrtc Video Constraints Not Working

I'm trying to get a lower resolution from the webcam na…

Multiple Flexboxes With Margin-right, Except The Last One In The Row? Without JS?

See the following image: Current setup is at top-left. If …

Problem In Getting Right Result For Select Box

i am using Jquery as: $(document).ready(function(){ test(&…

IE7 Is Clipping My Text. How Do I Adjust Its Attitude?

A few days ago I re-skinned my website. Development of this…

@font-face Behavior Inconsistencies Inside Of @media Query Rules (ie9)

The current behavior in Chrome, Firefox and Safari when it …

Only Let Certain Inner Divs Control Outer Div's Width

I have the follow html structure: …

Transparency Of A Filled Stroke In HTML5

I'm working on a doodling app in HTML5 and I would like…

Click Ignored: Issue With Label Elements To Associate With Form Controls

I have associated the label element to form fields using &#…

How Do I Search Nested Divs Using Regex For Class Names

I want to search for nested divs like these in my DOM …

• September 2024 (10)
• August 2024 (214)
• July 2024 (190)
• June 2024 (407)
• May 2024 (690)
• April 2024 (441)
• March 2024 (796)
• February 2024 (817)
• January 2024 (803)
• December 2023 (837)
• November 2023 (355)
• October 2023 (585)
• September 2023 (264)
• August 2023 (321)
• July 2023 (262)
• June 2023 (350)
• May 2023 (210)
• April 2023 (146)
• March 2023 (139)
• February 2023 (178)
• January 2023 (257)
• December 2022 (130)
• November 2022 (157)
• October 2022 (181)
• September 2022 (162)
• August 2022 (298)
• July 2022 (90)

Menu Halaman Statis

• Beranda

© 2022 - Html5 Manual