Note that there are some explanatory texts on larger screens.

plurals
  1. POJSFIDDLE not working on my page
    primarykey
    data
    text
    <p>I got a JSFIDDLE and trying to get it to work on my web form but it is not woorking. Can anyone please tell me what mistake i am making. The JSFIDDLE is working perfectly fine but i am not able to get it to work at my page only. This is the link to the fiddle: <a href="http://jsfiddle.net/Ywzjv/2/" rel="nofollow">LINK</a></p> <p>And this is how i am trying to use it :</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; var devices = ['computer', 'router'] var device_types = { 'computer': ['laptop', 'desktop'], 'router': ['wireless', 'bluetooth'] } var brands = { 'laptop': ['HP', 'DELL'], 'desktop': ['Apple', 'MAC'], 'wireless':['Foo','Bar'], 'bluetooth':['Grren','Blue'] } function createOptions(arr) { var html = ['&lt;option &gt;--select--&lt;/option&gt;']; $.each(arr, function(i, item) { html.push('&lt;option value="' + item + '"&gt;' + item + '&lt;/option&gt;') }); return html.join(''); } var mainOptions = createOptions(devices) $(function() { $("input[type=button][value=Add]").click(function(e) { for (i = 0; i &lt; document.getElementById('sel').value; i++) { e.preventDefault(); var j = 1; var newDiv = $('&lt;div class="row"&gt;').appendTo("#dropbox"); $("&lt;select class='devices has_dependents'&gt;").attr("name", "input1_" + j).append(mainOptions).appendTo(newDiv) $("&lt;select class='device_types has_dependents'&gt;").attr("name", "input2_" + j).appendTo(newDiv) $("&lt;select class='brands'&gt;").attr("name", "input3_" + j).appendTo(newDiv) $("&lt;input&gt;").attr("name", "input4_" + j).appendTo(newDiv); $("&lt;button&gt;").text("Remove").appendTo(newDiv).click(function(e) { e.preventDefault(); $(this).parent().remove(); }) j++; } }); $(document).on('change', 'select.has_dependents', function() { var val = $(this).val(), option_obj; if ($(this).is('.devices')) { option_obj = device_types; } else { option_obj = brands; } var options = createOptions( option_obj[val]); $(this).next().html(options) }) }) &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;select id="sel"&gt; &lt;option value="" selected="selected"&gt;&lt;/option&gt; &lt;option value="01" &gt;01&lt;/option&gt; &lt;option value="02" &gt;02&lt;/option&gt; &lt;option value="03" &gt;03&lt;/option&gt; &lt;option value="04" &gt;04&lt;/option&gt; &lt;option value="05" &gt;05&lt;/option&gt; &lt;option value="06" &gt;06&lt;/option&gt; &lt;option value="07" &gt;07&lt;/option&gt; &lt;option value="08" &gt;08&lt;/option&gt; &lt;option value="09" &gt;09&lt;/option&gt; &lt;option value="10" &gt;10&lt;/option&gt; &lt;option value="11" &gt;11&lt;/option&gt; &lt;option value="12" &gt;12&lt;/option&gt; &lt;option value="13" &gt;13&lt;/option&gt; &lt;option value="14" &gt;14&lt;/option&gt; &lt;option value="15" &gt;15&lt;/option&gt; &lt;/select&gt; &lt;input type="button" value="Add" /&gt; &lt;div id="dropbox"&gt;&lt;/div&gt; &lt;/form&gt;​ &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload