SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pass html code as variable?

    Pass html code as variable?

    Hi all

    Is it possible to store a block of html code as a variable then use that variable to output the
    html code.

    I have a select drop down menu, when an option is selected from that menu I would like to create another menu,
    The contents of the second will be determined by the selection of the first.

    I have tried to do it like this - this doesn't work at all.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css" media="screen">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 #wrap{
    	   margin:50px;
    	 }
    	</style>
    </head>
    
    <body>
      
      <div id="wrap">
        
        <select id="select" >
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
        </select>
        
        <div id="second">
          
        </div><!-- #second -->
        
      </div><!-- #wrap -->
      
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
      <script type="text/javascript">
      
        var optionOne = '
          <select id="select" >
            <option value="OneOne">OneOne</option>
            <option value="OneTwo">OneTwo</option>
            <option value="OneThree">OneThree</option>
          </select>
        '
        var optionTwo = '
          <select id="select" >
            <option value="TwoOne">TwoOne</option>
            <option value="TwoTwo">TwoTwo</option>
            <option value="TwoThree">TwoThree</option>
          </select>
        '
        var optionThree = '
          <select id="select" >
            <option value="ThreeOne">ThreeOne</option>
            <option value="ThreeTwo">ThreeTwo</option>
            <option value="ThreeThree">ThreeThree</option>
          </select>
        '
        $('#select').change(function(){
          if((this.value) == One){
            secondSel = OptionOne;
          }
          if((this.value) == Two){
            secondSel = OptionTwo;
          }
          if((this.value) == Three){
            secondSel = OptionThree;
          }
          $('#second').html(secondSel);
        })
        
      </script>  
    </body>
    </html>

    So the option selected in the first menu will determine the contents of the second menu.

    I don't no if this is the best way to do this so I would be happy if anyone had any other ideas how to do this.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    So the option selected in the first menu will determine the contents of the second menu.
    The standard way of doing this is for the select options to all be on the page, and to use javascript to hide them when the page loads, then reveal the appropriate one that is chosen.

    HTML Code:
    <form id="order">
        <select name="main">
            <option value="">Please choose...</option>
            <option value="first">First</option>
            <option value="second">Second</option>
            <option value="third">Third</option>
        </select>
        <select name="first">
            ...
        </select>
        <select name="second">
            ...
        </select>
        <select name="third">
            ...
        </select>
    </form>
    Code javascript:
    function hideRelatedSelects(main) {
        $('option', main).each(function () {
            $('[name="' + this.value + '"]', this.form).hide();
        });
    }
     
    var mainSelect = $('#order [name="main"]');
    hideRelatedSelects(mainSelect);
     
    $(mainSelect).change(function () {
        hideRelatedSelects(this);
        $('[name="' + this.value + '"]', this.form).show();
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the code paul_wilkins, I think I'll stick with my idea - easier for me to understand.

    I have a problem with my way though - I can't seem to use the second drop down when it's added

    this doesn't work.

    Code:
    $('#second2').change(function(){
      alert((this.value));
    })
    Is this because of the way I have added it. ?

    [code]

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css" media="screen">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 #wrap{
    	   margin:50px;
    	 }
    	 #second{
    	   margin:20px 0 0 0;
    	 }
    	</style>
    </head>
    
    <body>
    
      <div id="wrap">
    
        <select id="select" >
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
        </select>
    
        <div id="second">
    
        </div><!-- #second -->
    
      </div><!-- #wrap -->
    
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
      <script type="text/javascript">
    
        var optionOne = '<form>'+
                    '<select id="select2" >' +
                    '<option value="OneOne">OneOne</option>' +
                    '<option value="OneTwo">OneTwo</option>' +
                    '<option value="OneThree">OneThree</option>' +
                    '</select>'+
                    '</form>';
        var optionTwo = '<form>'+
                    '<select id="select2" >' +
                    '<option value="TwoOne">TwoOne</option>' +
                    '<option value="TwoTwo">TwoTwo</option>' +
                    '<option value="TwoThree">TwoThree</option>' +
                    '</select>'+
                    '</form>';
        var optionThree = '<form>'+
                    '<select id="select2" >' +
                    '<option value="ThreeOne">ThreeOne</option>' +
                    '<option value="ThreeTwo">ThreeTwo</option>' +
                    '<option value="ThreeThree">ThreeThree</option>' +
                    '</select>'+
                    '</form>';
    
        $('#select').change(function(){
          if (this.value == 'One'){
            secondSel = optionOne;
          }
          if (this.value == 'Two'){
            secondSel = optionTwo;
          }
          if (this.value == 'Three'){
            secondSel = optionThree;
          }
          $('#second').html(secondSel);
        });
        
        $('#second2').change(function(){
          alert((this.value));
        })
        
      </script>
      
    </body>
    </html>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    I can't seem to use the second drop down when it's added

    this doesn't work.

    Code:
    $('#second2').change(function(){
      alert((this.value));
    })
    Is this because of the way I have added it. ?
    It's likely to be due to there being nothing with an id of "second2" - should that be something else instead?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry that was typo

    This still doesn't work

    Code:
    $('#select2').change(function(){
          alert((this.value));
        })
    #select2 should be the select menu thats added

    Code:
    var optionOne = '<form>'+
                    '<select id="select2" >' +
                    '<option value="OneOne">OneOne</option>' +
                    '<option value="OneTwo">OneTwo</option>' +
                    '<option value="OneThree">OneThree</option>' +
                    '</select>'+
                    '</form>';

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css" media="screen">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 #wrap{
    	   margin:50px;
    	 }
    	 #second{
    	   margin:20px 0 0 0;
    	 }
    	</style>
    </head>
    
    <body>
    
      <div id="wrap">
    
        <select id="select" >
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
        </select>
    
        <div id="second">
    
        </div><!-- #second -->
    
      </div><!-- #wrap -->
    
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
      <script type="text/javascript">
    
        var optionOne = '<form>'+
                    '<select id="select2" >' +
                    '<option value="OneOne">OneOne</option>' +
                    '<option value="OneTwo">OneTwo</option>' +
                    '<option value="OneThree">OneThree</option>' +
                    '</select>'+
                    '</form>';
        var optionTwo = '<form>'+
                    '<select id="select2" >' +
                    '<option value="TwoOne">TwoOne</option>' +
                    '<option value="TwoTwo">TwoTwo</option>' +
                    '<option value="TwoThree">TwoThree</option>' +
                    '</select>'+
                    '</form>';
        var optionThree = '<form>'+
                    '<select id="select2" >' +
                    '<option value="ThreeOne">ThreeOne</option>' +
                    '<option value="ThreeTwo">ThreeTwo</option>' +
                    '<option value="ThreeThree">ThreeThree</option>' +
                    '</select>'+
                    '</form>';
    
        $('#select').change(function(){
          if (this.value == 'One'){
            secondSel = optionOne;
          }
          if (this.value == 'Two'){
            secondSel = optionTwo;
          }
          if (this.value == 'Three'){
            secondSel = optionThree;
          }
          $('#second').html(secondSel);
        });
        
        $('#select2').change(function(){
          alert((this.value));
        })
        
      </script>
      
    </body>
    </html>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    Sorry that was typo

    This still doesn't work
    One at a time, these issues are resolved by fixing one thing at a time.

    Quote Originally Posted by ttmt View Post
    Code:
    $('#select2').change(function(){
          alert((this.value));
        })
    The next issue is that when that above section of code is executed, the "select2" identifier does not yet exist on the page. You can deal with that by making use of jQuery's .live() method instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    The second way can be done when you use .on() with a selector that exists, such as the document, and specify in the parameters the selector to attach it to.

    The .on() documentation page says for you to see the .live() documentation page for help with the conversion.

    The syntax you need to use is:

    Code:
    $(document).on(events, selector, data, handler);
    The reason why what your attempted to use doesn't work, is that you didn't have a valid selector to apply .on() to.

    This will work:

    Code javascript:
    $(document).on('change', '.selectDiv', function() {
        alert($(this).val());
    });

    It will still not alert anything useful, because the this keyword is referencing the div element (and not a form field), but you should be able to make further progress from here.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help paul_wilkins, I should be able to muddle through from here.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •