Pass html code as variable?

**ttmt** · Jan 16, 2012 06:01

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.

**paul_wilkins** · Jan 16, 2012 16:14

Originally Posted by ttmt

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();
});

**ttmt** · Jan 17, 2012 04:16

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>

**paul_wilkins** · Jan 17, 2012 04:27

Originally Posted by ttmt

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?

**ttmt** · Jan 17, 2012 04:34

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>

**paul_wilkins** · Jan 17, 2012 05:26

Originally Posted by ttmt

Sorry that was typo

This still doesn't work

One at a time, these issues are resolved by fixing one thing at a time.

Originally Posted by ttmt

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.

**ttmt** · Jan 17, 2012 09:29

Still having problems here so I have an example that closer resembles what I'm trying to do.

http://www.ttmt.org.uk/

So I have a select menu thats adds a div which contains another select menu. The contents of the second select menu in the div is determined by the option selected in the first menu.

The problem I'm having now is I need to capture the value selected in the second menu in the div

Code:

$$ = $("<div class='selectDiv'></div>").appendTo('#contents');
$$.append(
	$('<form />').html(theMenu).change(function(){
		var index = $(this).parent().index();
		alert(this.value);
	})
)

It's currently alerting 'undefined', is this because it isn't available when the script is calling it?

HTML

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{
	   width:500px;
	   margin:50px auto 0 auto;
	 }
	 .selectDiv{
	   background:red;
	   height:100px;
	   margin:10px 0 0 0;
	 }
	 .selectDiv .divSelect{
 	   margin:20px;
 	 }
	</style>
</head>

<body>
  <div id="wrap">
    <form method="" action="">              
      <select id="addDiv">
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Three">Three</option>
      </select>
    </form>
    
    <div id="contents">
      
    </div><!-- #contents -->
    
  </div><!-- #wrap -->



  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="code.js" type="text/javascript"></script>
</body>
</html>

jQuery

Code:

window.one=
  '<select class="divSelect">'+
  '<option value="One-One">One-One</option>'+
  '<option value="One-Two">One-Two</option>'+
  '<option value="One-Three">One-Three</option>'+
  '</select>';
window.two=
  '<select class="divSelect">'+
  '<option value="Two-One">Two-One</option>'+
  '<option value="Two-Two">Two-Two</option>'+
  '<option value="Two-Three">Two-Three</option>'+
  '</select>';
window.three=
  '<select class="divSelect">'+
  '<option value="Three-One">Three-One</option>'+
  '<option value="Three-Two">Three-Two</option>'+
  '<option value="Three-Three">Three-Three</option>'+
  '</select>';

$('#addDiv').change(function(){
	if((this.value) == 'One'){
		theMenu = window.one;
	}
	if((this.value) == 'Two'){
		theMenu = window.two;
	}
	if((this.value) == 'Three'){
		theMenu = window.three;
	}
	//
	$$ = $("<div class='selectDiv'></div>").appendTo('#contents');
	$$.append(
		$('<form />').html(theMenu).change(function(){
			var index = $(this).parent().index();
			alert(this.value);
		})
	)
})

**paul_wilkins** · Jan 17, 2012 13:44

Originally Posted by ttmt;

It's currently alerting 'undefined', is this because it isn't available when the script is calling it?

Nope, what's happening there is that the change even it attached to the form element.
You'll be wanting to apply that advice I gave earlier about using the live() method instead.

**ttmt** · Jan 18, 2012 03:00

paul_wilkins, I did look at the live() method on the jQuery site but the documentation said it's deprecated and replaced by on(). I couldn't get on() to work.

**paul_wilkins** · Jan 18, 2012 03:10

Originally Posted by ttmt

paul_wilkins, I did look at the live() method on the jQuery site but the documentation said it's deprecated and replaced by on(). I couldn't get on() to work.

Well what did you try?

**ttmt** · Jan 18, 2012 03:12

I didn't keep it, I'll try and do it again now.

**ttmt** · Jan 18, 2012 03:28

I've just done this, and it's working now - I'll try it in the proper code and see what happens

Code:

window.one=
  '<select class="divSelect">'+
  '<option value="One-One">One-One</option>'+
  '<option value="One-Two">One-Two</option>'+
  '<option value="One-Three">One-Three</option>'+
  '</select>';
window.two=
  '<select class="divSelect">'+
  '<option value="Two-One">Two-One</option>'+
  '<option value="Two-Two">Two-Two</option>'+
  '<option value="Two-Three">Two-Three</option>'+
  '</select>';
window.three=
  '<select class="divSelect">'+
  '<option value="Three-One">Three-One</option>'+
  '<option value="Three-Two">Three-Two</option>'+
  '<option value="Three-Three">Three-Three</option>'+
  '</select>';

$('#addDiv').change(function(){
	if($(this).val() == 'One'){
		theMenu = window.one;
	}
	if($(this).val() == 'Two'){
		theMenu = window.two;
	}
	if($(this).val() == 'Three'){
		theMenu = window.three;
	}
	//
	$$ = $("<div class='selectDiv'><form>"+theMenu+"</form></div>").appendTo('#contents');
	
	$('.divSelect').on('change', function(){
		alert($(this).val());
	})
	
})

I would really like to do it this way so the on() function is outside the function adding the form but this doesn't work.

Code:

window.one=
  '<select class="divSelect">'+
  '<option value="One-One">One-One</option>'+
  '<option value="One-Two">One-Two</option>'+
  '<option value="One-Three">One-Three</option>'+
  '</select>';
window.two=
  '<select class="divSelect">'+
  '<option value="Two-One">Two-One</option>'+
  '<option value="Two-Two">Two-Two</option>'+
  '<option value="Two-Three">Two-Three</option>'+
  '</select>';
window.three=
  '<select class="divSelect">'+
  '<option value="Three-One">Three-One</option>'+
  '<option value="Three-Two">Three-Two</option>'+
  '<option value="Three-Three">Three-Three</option>'+
  '</select>';

$('#addDiv').change(function(){
	if($(this).val() == 'One'){
		theMenu = window.one;
	}
	if($(this).val() == 'Two'){
		theMenu = window.two;
	}
	if($(this).val() == 'Three'){
		theMenu = window.three;
	}
	//
	$$ = $("<div class='selectDiv'><form>"+theMenu+"</form></div>").appendTo('#contents');
	
})

$('.divSelect').on('change', function(){
	alert($(this).val());
})

**paul_wilkins** · Jan 18, 2012 03:51

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.

**ttmt** · Jan 18, 2012 04:15

Thanks for your help paul_wilkins, I should be able to muddle through from here.

User Tag List

Thread: Pass html code as variable?

Thread Tools

Display

Pass html code as variable?

Bookmarks

Bookmarks

Posting Permissions