Databases
StackOverflow2013
Postsdbo
PORemove lists falling after selected list
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORemove lists falling after selected list
    primarykey
    data
    text
    <p>I am stuck on a problem where I want to remove all the list that fall after selected list. I have created <a href="http://jsfiddle.net/8TZzD/1/" rel="nofollow">JS Fiddle</a> here but it doesn't work. For example, if I select item from first drop-down then next two should removed, or if I select from second drop-down then third should be removed.</p> <h3>HTML</h3> <pre><code>&lt;div id='levels'&gt; &lt;select id="level" class="parent" name="data[level][]"&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;/select&gt; &lt;select id="level" class="parent" name="data[level][]"&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;/select&gt; &lt;select id="level" class="parent" name="data[level][]"&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; </code></pre> <h3>Javascript</h3> <pre><code>$("#levels").on('change', function() { $(this).nextAll().remove(); });​ </code></pre> <p>I want to achieve this without assigning different class names or div names to each list.</p> <p><strong>Cakephp Code</strong></p> <p><strong>Master File</strong></p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function() { $("select").on('change', function() { $(this).nextAll('select').remove(); $("&lt;div&gt;").load('/dashboard/details/show_levels',function() { $("#levels").append($(this).html()); }); }) &lt;div id=levels&gt; &lt;?php echo $form-&gt;input('level',array('options'=&gt;$level,'type'=&gt;'select','scroabble'=&gt;true,'multiple'=&gt;true, 'class'=&gt;'parent')); ?&gt; &lt;/div&gt; }); </code></pre> <p><strong>show_levels</strong></p> <pre><code>&lt;?php $abc=array('a','b','c','d'); echo $form-&gt;input('level',array('options'=&gt;$abc,'type'=&gt;'select','scroabble'=&gt;true,'multiple'=&gt;true, 'class'=&gt;'parent')); ?&gt; </code></pre> <hr> <p><em><strong>Update:</em></strong> </p> <p><strong>Follwing solution worked for me</strong></p> <p>Replaced </p> <pre><code> $(this).nextAll('select').remove(); </code></pre> <p>with</p> <pre><code>$(this).parents().nextUntil().remove(); </code></pre> <p>Not sure how it worked, and whats the difference between two.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USFr0zenFyr
    1. USDeadlock
    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.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORemove lists falling after selected list
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PORemove lists falling after selected list
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COAre you sure it doesn't only work the first time? The fact that you are using `on` in the way you are, it won't be re-bound to the new elements appended to `#levels`. If you use `on` the way I did, it might fix it. This is because the `onchange` event is bound to each `<select>` element on page load. When you change the value of one, the following elements are removed (and their `onchange` event is unbound). When you put new elements back into the page, they shouldn't have the `onchange` event bound to them again.
      singulars
      1. PORemove lists falling after selected list
      1. USIan
    2. COAnd binding the `onchange` event to `#levels` does nothing - a `<div>` doesn't have an `onchange` event. If you use `on` like I proposed, it would work fine.
      singulars
      1. PORemove lists falling after selected list
      1. USIan
 

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