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.


<!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.

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.


<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>


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

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.


$('#second2').change(function(){
  alert((this.value));
})

Is this because of the way I have added it. ?




<!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”/>

&lt;title&gt;untitled&lt;/title&gt;
&lt;style type="text/css" media="screen"&gt;
 *{
   margin:0;
   padding:0;
 }
 #wrap{
   margin:50px;
 }
 #second{
   margin:20px 0 0 0;
 }
&lt;/style&gt;

</head>

<body>

<div id=“wrap”>

&lt;select id="select" &gt;
  &lt;option value="One"&gt;One&lt;/option&gt;
  &lt;option value="Two"&gt;Two&lt;/option&gt;
  &lt;option value="Three"&gt;Three&lt;/option&gt;
&lt;/select&gt;

&lt;div id="second"&gt;

&lt;/div&gt;&lt;!-- #second --&gt;

</div><!-- #wrap –>

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script type=“text/javascript”>

var optionOne = '&lt;form&gt;'+
            '&lt;select id="select2" &gt;' +
            '&lt;option value="OneOne"&gt;OneOne&lt;/option&gt;' +
            '&lt;option value="OneTwo"&gt;OneTwo&lt;/option&gt;' +
            '&lt;option value="OneThree"&gt;OneThree&lt;/option&gt;' +
            '&lt;/select&gt;'+
            '&lt;/form&gt;';
var optionTwo = '&lt;form&gt;'+
            '&lt;select id="select2" &gt;' +
            '&lt;option value="TwoOne"&gt;TwoOne&lt;/option&gt;' +
            '&lt;option value="TwoTwo"&gt;TwoTwo&lt;/option&gt;' +
            '&lt;option value="TwoThree"&gt;TwoThree&lt;/option&gt;' +
            '&lt;/select&gt;'+
            '&lt;/form&gt;';
var optionThree = '&lt;form&gt;'+
            '&lt;select id="select2" &gt;' +
            '&lt;option value="ThreeOne"&gt;ThreeOne&lt;/option&gt;' +
            '&lt;option value="ThreeTwo"&gt;ThreeTwo&lt;/option&gt;' +
            '&lt;option value="ThreeThree"&gt;ThreeThree&lt;/option&gt;' +
            '&lt;/select&gt;'+
            '&lt;/form&gt;';

$('#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>

It’s likely to be due to there being nothing with an id of “second2” - should that be something else instead?

Sorry that was typo

This still doesn’t work


$('#select2').change(function(){
      alert((this.value));
    })

#select2 should be the select menu thats added


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


<!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>

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

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.

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


$$ = $("<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


<!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


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

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.

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?

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

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



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.



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


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 [url=“http://api.jquery.com/live/”].live() documentation page for help with the conversion.

The syntax you need to use is:


$(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:


$(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.

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