CODEWITHSUNDEEP
javascriptjqueryhtml
sandy sharma
sandy sharma

Reputation: 101

selected item of dropdownlist display text on same page

Hello i want to display a text when user selects an item of dropdownlist. On page by default all text is displayed but if user selects an item from dropdown list then only the focus goes to perticular text section. In code if i select 'a' item then on page focus goes to 'a' item text. I don't know how to do it in javascript ,can anyone please help me.

<html>
<head>
<script type="text/javascript" language="javascript">
function ChangeText()
{
var parm = document.getElementById("mySelection");
document.getElementById('lbltxt').innerHTML = parm.options[parm.selectedIndex].text; 

}
</Script>
</head>
<body>
<select id="mySelection" onchange="Return ChangeText();" style="width:30%;">
<option disabled="disabled" selected="selected">Select method</option>
  <option value="1">a (new version)</option>
  <option value="2">b (old version)</option>
  <option value="3">c</option>
</select>

<b><label id="lblid" /></b><br /><br />
<strong id="1">A(For new versions)</strong><br />
In a, This can be done by denying the OPTIONS verb from the HTTP Verb Request Filtering rules in IIS.Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content<br />

<img src="images/1.png" style="float:left;"><img style="float:left;" src="images/arrow_up.png" width="62" height="60">Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content<br />
<br />
<strong id="2">b (For old versions)</strong><br />
  for B :<br />
Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content
<img src="images/2.png">Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content<br /><br />
<strong id="3">C</strong><br />
<p style="text-align:justify; font-size:17px;">Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content</p>
</body>
</html>

Upvotes: 0

Views: 2803

Answers (4)

Sarwan Kumar
Sarwan Kumar

Reputation: 1311

You should write following code in js, hopefully it will work fine. 

$("#mySelection").on('change', function() {
  id = $(this).val();
  window.location.hash = "#"+id;
})

Upvotes: 0

Ziv Weissman
Ziv Weissman

Reputation: 4526

Your code is fine, If I understand what you are trying to do, simply correct your "onchange" call, and I don't see any element with id="lbltxt" so I've added one: Change this part of your code:

<body>
    <select id="mySelection" onchange="ChangeText();" style="width:30%;">
        <option disabled="disabled" selected="selected">Select method</option>
        <option value="1">a (new version)</option>
        <option value="2">b (old version)</option>
        <option value="3">c</option>
    </select>

    <b><label id="lblid" /></b><br /><br />
    //added element
    <div id="lbltxt" ></div><br /><br /> 
    .....

and if you want also to "scroll" to that item you should modify your js function like this:

function ChangeText()
        {
            var parm = document.getElementById("mySelection");
            document.getElementById('lbltxt').innerHTML = parm.options[parm.selectedIndex].text;
            window.location.hash = "#" + parm.value;
        }

Upvotes: 0

BOBIN JOSEPH
BOBIN JOSEPH

Reputation: 1022

First you should call a javascript function In the OnChange() event of the Dropdown Then You can Add a label in the position of text you want. You can Set the text for the page load (All items) for the label. Then , in the javascript (Called when the drop down changed), You can alter the Label Text According to the drop down selection.

In the Page Loading itself you can assign the values for the label, as you want all.

            		function ChangeText()
                        {
                          var contentText;
                          var selectedITem='';
                        var parm = document.getElementById("mySelection");
                          selectedITem =parm.options[parm.selectedIndex].text;
                          if(selectedITem == 'a')
                            contentText = 'Type What you want for option A'
                         else  if(selectedITem == 'b')
                            contentText = 'Type What you want for option B'
                          
                          
    str='<tr> <td>'  +  contentText +' </td> </tr>';
     $("#test").append(str);
                          

                        }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <table id="test">
              
              <tr>
              
            <td width="40%" align="left">
                                                
             <select id="mySelection" onchange="ChangeText();" style="width: 100%;">
               
             <option disabled="disabled"   selected="selected">Select method</option>
                  <option value="1">a</option>
                  <option value="2">b</option>
                  <option value="3">c</option>
                   </select>
                  &nbsp;&nbsp;&nbsp;
              </td>


              </tr>
              
              </table>

Upvotes: 1

Ritesh Dhuri
Ritesh Dhuri

Reputation: 215

HTML

<select id="mySelection" style="width:30%;">
    <option disabled="disabled" selected>Select method</option>
    <option value="1">a (new version)</option>
    <option value="2">b (old version)</option>
    <option value="3">c</option>
</select><br /><br />

<table>
    <tr id="1" class="user">
        <td class="img">
            <img src="images/1.png" width="62" height="60"></td>
        <td class="description">
            <p><strong>A(For new versions)</strong></p>
            <p>In a, This can be done by denying the OPTIONS verb from the HTTP Verb Request Filtering rules in IIS.</p>
        </td>
    </tr>
    <tr id="2" class="user">
        <td class="img">
            <img src="images/arrow_up.png" width="62" height="60">
        </td>
        <td class="description">
            <p><strong>b (For old versions)</strong></p>
            <p>for B :<br />Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content</p>
        </td>
    </tr>
    <tr id="3" class="user">
        <td class="img">
            <img src="images/2.png" width="62" height="60">
        </td>
        <td class="description">
            <p><strong>C</strong></p>
            <p>Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML contentFollowing is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content</p>
        </td>
    </tr>
</table>

CSS

    table{
        margin: 20px;
    }
    table td{
        padding-left: 10px;
        padding-bottom: 10px;
        vertical-align: top;
    }
    .user{
        display: none;
    }

Script

$("#mySelection").on('change', function(){
    var id = $(this).val();
    $('.user').hide();
    $('#'+id).show();
});

Upvotes: 0

Related Questions