Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Since you posed the question of how to get your code working as part of the comments thread I figured I'd send you a working sample than handles cloning of the elements without duplicating the ID's. Here is a sample using jQuery 1.7.1. If you are using an older version, the .on() event will not work and you will have to switch to the .live() event.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Sample&lt;/title&gt; &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" &gt;&lt;/script&gt; &lt;style type="text/css"&gt; /* Hide the children selector by default */ #perksList li.children ul { display: none; } //Hides the bullet points ul, ul li { list-style-type: none; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul id="perksList"&gt; &lt;li class="perks"&gt; &lt;label&gt;Choose Perks&lt;/label&gt; &lt;ul&gt; &lt;li class="adults"&gt; &lt;label&gt;Adults:&lt;/label&gt; &lt;select name="Select[Ask][0][Adults]"&gt; &lt;option label="0" value="0"&gt;0&lt;/option&gt; &lt;option label="1" value="1"&gt;1&lt;/option&gt; &lt;option label="2" value="2"&gt;2&lt;/option&gt; &lt;option label="3" value="3"&gt;3&lt;/option&gt; &lt;option label="4" value="4"&gt;4&lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;li class="children"&gt; &lt;label&gt;Children&lt;/label&gt; &lt;select name="Select[Ask][0][Children]"&gt; &lt;option label="0" value="0"&gt;0&lt;/option&gt; &lt;option label="1" value="1"&gt;1&lt;/option&gt; &lt;option label="2" value="2"&gt;2&lt;/option&gt; &lt;option label="3" value="3"&gt;3&lt;/option&gt; &lt;option label="4" value="4"&gt;4&lt;/option&gt; &lt;/select&gt; &lt;ul&gt; &lt;li class="title"&gt;&lt;label&gt;Value of perk&lt;/label&gt;&lt;/li&gt; &lt;li&gt; &lt;select name="Select[Ask][0][Children][0]"&gt; &lt;option value="0" label="0"&gt;0&lt;/option&gt; &lt;option value="1" label="1"&gt;1&lt;/option&gt; &lt;option value="2" label="2"&gt;2&lt;/option&gt; &lt;option value="3" label="3"&gt;3&lt;/option&gt; &lt;option value="4" label="4"&gt;4 &lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;li&gt; &lt;select name="Select[Ask][0][Children][1]"&gt; &lt;option value="0" label="0"&gt;0&lt;/option&gt; &lt;option value="1" label="1"&gt;1&lt;/option&gt; &lt;option value="2" label="2"&gt;2&lt;/option&gt; &lt;option value="3" label="3"&gt;3&lt;/option&gt; &lt;option value="4" label="4"&gt;4 &lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;li&gt; &lt;select name="Select[Ask][0][Children][2]"&gt; &lt;option value="0" label="0"&gt;0&lt;/option&gt; &lt;option value="1" label="1"&gt;1&lt;/option&gt; &lt;option value="2" label="2"&gt;2&lt;/option&gt; &lt;option value="3" label="3"&gt;3&lt;/option&gt; &lt;option value="4" label="4"&gt;4 &lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;li&gt; &lt;select name="Select[Ask][0][Children][3]"&gt; &lt;option value="0" label="0"&gt;0&lt;/option&gt; &lt;option value="1" label="1"&gt;1&lt;/option&gt; &lt;option value="2" label="2"&gt;2&lt;/option&gt; &lt;option value="3" label="3"&gt;3&lt;/option&gt; &lt;option value="4" label="4"&gt;4 &lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;input type="button" value="Clone" id="btnClone"/&gt; &lt;script type="text/javascript"&gt; //Store the element as it was when the page was first loaded var cloneItem = '&lt;li class="perks"&gt;' + $('.perks').clone().html() + '&lt;/li&gt;'; $(document).ready(function () { //Using jQuery 1.7.1, the "on" event listens for any new items added. //If you're using an older version of jQuery you'll need to use the .live() event $(document).on('change', 'li.children &gt; select', function () { var parent = $(this).parents('.perks'); parent.find('li.children ul li select').hide().attr('disabled', 'disabled'); if ($(this).val() == '0') { parent.find('li.children ul').hide(); } else { parent.find('li.children ul').show(); $('li.children ul li select', parent).slice(0, $(this).val()).removeAttr('disabled').show(); } }); //Handels adding additional rows $('#btnClone').click(function () { var rowIndex = $('#perksList .perks').length; $('#perksList').append(cloneItem); $('#perksList .perks:eq(' + rowIndex + ') .adults select').attr('name', 'Select[Ask][' + rowIndex + '][Adults]'); var listItems = $('#perksList .perks:eq(' + rowIndex + ') .children select'); listItems.each(function () { var selectIndex = listItems.index(this); if (selectIndex == 0) { $(this).attr('name', 'Select[Ask][' + rowIndex + '][Children]'); } else { $(this).attr('name', 'Select[Ask][' + rowIndex + '][Children][' + (selectIndex - 1) + ']'); } }); }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POjQuery - value of one select add select how to do that?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USNick Bork
    1. USNick Bork
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POjQuery - value of one select add select how to do that?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COthhhis sample helped me to create thhis element. thank you very much
      singulars
      1. PO
      1. USarclite
    2. COcan some1 tell me one thing how to secure that the value of selects with from Value of perk name example `Select[Ask][0][Children][0]` is removing the bottom selects
      singulars
      1. PO
      1. USarclite
    3. COI don't understand what it is you're asking for. Please tried to better word your question and possibly provide an example.
      singulars
      1. PO
      1. USNick Bork
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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