Mixing
Jquery relative dropdown
Jquery relative dropdown
Code has 2 dropdowns -> categories and subcategories. sub Categories are dependable on selection of categories. Now problem arise when we have 3 pairs of dropdown. Like if I change first dropdown's category it will change all 3 sub categorie's dropdown values.
$(document).on('change', '.cat_select', function(e) {
$(this).closest().find('.subcat_select').find('option:not(:first)').remove();
$(this).closest().find('.subcat_select').append(data.html);
//data.html comes from an ajax request.
});
1
1
1
// Result will come on selection of cat_select.
</div>
1
1
1
// Result will come on selection of cat_select.
</div>
1
1
1
// Result will come on selection of cat_select.
</div>I know that, that's why i came here for an answer.
– Jim Kasprowicz
Jun 29 at 11:06
3 Answers
3
You can provide a selector in your closest() call to get a specific parent. Alternatively, .parent().parent() should also work in this case.
closest()
.parent().parent()
var data = { html: "<option>test</option>" }; //data.html comes from an ajax request.
$(document).on('change', '.cat_select', function(e) {
$(this).closest('.row').find('.subcat_select').find('option:not(:first)').remove();
$(this).closest('.row').find('.subcat_select').append(data.html);
});
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
1
1
1
// Result will come on selection of cat_select.
</div>
1
1
1
// Result will come on selection of cat_select.
</div>
1
1
1
// Result will come on selection of cat_select.
</div>– Jim Kasprowicz
Jun 29 at 11:28
@JimKasprowicz A bit late, but I edited it to your new HTML structure.
– TiiJ7
Jun 29 at 12:16
Thank you very much. It worked.
– Jim Kasprowicz
Jun 30 at 6:42
Try this;
HTML
1
1
1
// Result will come on selection of cat_select.
1
2
3
// Result will come on selection of cat_select.
1
1
1
// Result will come on selection of cat_select.
JS
$('.cat_select').on('change', function(e) {
var $select = $(this);
var fornumber = $select.attr('data-parfor');
$('.subcat_select[data-subfor="'+fornumber+'"]').find('option:not(:first)').remove();
$('.subcat_select[data-subfor="'+fornumber+'"]').append(data.html);
//data.html comes from an ajax request.
});
Adding the data-parfor attribute and the data-subfor attribute allows you to use the same css class, which means less styling and instead, the selector in JS uses the value of the clicked elements' attribute for the target.
https://jsfiddle.net/xpvt214o/328854/
Agreed, that will work also. but here I have one div only. (2 dropdown). A user can clone and add as much dropdown as he wants. So not possible to add data attributes to them.
– Jim Kasprowicz
Jun 29 at 11:19
@JimKasprowicz : That's easy, just enumerate through the drop-downs at add the attributes. Inside the function you're using to add/clone, you can n+1 the attribute number. This method also allows you to change the layout/structure of the html without having to re-work JS.
– Benjamin James Kippax
Jun 29 at 11:32
I have edited the question, please see that.
– Jim Kasprowicz
Jun 29 at 11:41
You are using closest with no parameter and that is not allowed, it need to have a first parameter as selector which is required. So use this to access the parent.
closest
selector
$(this).closest('.row') // .row should be the selector of the element that encloses both the element.
Outer div class is 'inner-repeater'. tried $(this).closest('div').find('.inner-repeater) not working. tried $(this).parent('.inner-repeater').find('subcat_select') not working.
– Jim Kasprowicz
Jun 29 at 11:14
Try this : $(this).closest('.row') , In the closest you need to pass the wrapper element that encloses both the select and depended select.
– sanjeev
Jun 29 at 14:22
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
you are having same class for all dropdown and you use the same class in jQuery. so it happens
– Joseph Stalin
Jun 29 at 11:05