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

Edit A Txt File Using Javascript/jquery

I want to modify a .txt (overwrite completely) using javasc…

How To Include Highcharts Motion Plugin For Bubble Plot Using R Wrapper?

Highcharts motion plugin - Requires 3 adjustments to a high…

Using A Jquery Slider For Text Instead Of Images?

This may be a little too specific, but I have a jquery slid…

Detect Child Node Number

I'm trying to add a event listener for clicking and I w…

Fade In Fade Out Using Dynamic Range Input Speed And Repeat

am Trying to control the speed and repeat of my fade in fad…

Genvalidator: Check For Checkbox In Form Validation

I'm using genvalidator to have some tests on input fiel…

Text-overflow Ellipsis Without "white-space: Nowrap"?

I was wondering if there is any clever way, to achieve the …

Call Multiple Ajax Request In Series Or Parallel

I have 3 functions. load_graphs('national','…

How To Handle 'Possibly Unhandled Rejection: Backdrop Click' In A General Way

I have an angular service for handling modals: angular.modu…

Axios - How To Deal With Big Integers

Here is my request: axios.get(url) .then(res => …

• November 2024 (31)
• October 2024 (60)
• September 2024 (18)
• August 2024 (382)
• July 2024 (342)
• June 2024 (695)
• May 2024 (1295)
• April 2024 (805)
• March 2024 (1554)
• February 2024 (1686)
• January 2024 (1347)
• December 2023 (1310)
• November 2023 (414)
• October 2023 (567)
• September 2023 (315)
• August 2023 (341)
• July 2023 (278)
• June 2023 (374)
• May 2023 (204)
• April 2023 (124)
• March 2023 (136)
• February 2023 (187)
• January 2023 (261)
• December 2022 (123)
• November 2022 (224)
• October 2022 (150)
• September 2022 (164)
• August 2022 (488)
• July 2022 (285)
• June 2022 (263)

Menu Halaman Statis

• Beranda

© 2022 - JavaScript College