Reset "<select>" by unchecking checkbox

Asked

Viewed 384 times

5

Hello dear beasts in Jquery, following the logic of the example below, how to make select always return to the first value of the list after unchecking the respective checkbox?

And the second question is whether there is a better (simpler) way to get the same result.

I thought I had succeeded, through previous question but error appeared.

From now on, thank you.

https://jsfiddle.net/8uk440do/6/

javascript jquery

3 answers

6


Using jQuery just do

select.prop('selectedIndex', 0);

thus: https://jsfiddle.net/8uk440do/8/. So he tells select to use as a choice option index 0, namely the first.

You can also use select.val(''); that gives the same effect. In some browsers this solution does not choose the first choice but rather leaves no choice, blank.

With native Javascript it would be el.selectedIndex = 0;

  • tu é fera! Another question: Following this logic, how to add more "items" to the IF in this format? For example, how to add a "$('#id'). show();" on that line?

  • 1

    @Danilofagundes Check out my code, in your version you are using too much (redundant) code and it is too customized. It is better to lie simple and use the DOM, ie: find which select is in the same <tr> and do not fetch the widget by ID.

  • I understood, I get a little lost using this logic but for lack of knowledge (custom). For example: in this new line of code: if (!this.checked) select.prop('selectedIndex', 0); what about adding a new "item" in that same if ? a "$('#id'). show();" for example. Understanding this makes it easier for me to assemble others. Thank you ;)

  • @Danilofagundes what do you mean by "new item"? do you want to change more than one select at a time?

  • Imagine a <span id="text1">, following your tip, how to hide span when selecting any of the "checkbox" and show span when there is no selection? So I believe I will understand how if and Else works in this code. Here’s the deal: https://jsfiddle.net/8uk440do/11/

  • @Danilofagundes in this case the simplest is to check whether the sum is >0... is at least the most practical, so: $('#texto1').toggle(!sum);: https://jsfiddle.net/8uk440do/12/ but you may also use .filter(), which gives the same result: https://jsfiddle.net/8uk440do/13/

  • Endendi, and what would be the alternative using the "checked" checkbox state? Then, I think it became clearer: https://jsfiddle.net/8uk440do/15/ ... I end here. Thanks so much for today’s lesson and sorry about anything, I’m a beginner here.

  • @Danilofagundes https://jsfiddle.net/8uk440do/16/, I prefer not to use Ids. Have a look at the suggestion. If you don’t understand, ask a new question that you will receive help. I made some corrections to your example, but the key is eq() which chooses an element among the found ones, and receives the i which is the index of inputs. So long as there is 1 span.aviso for each input this code works, regardless of the amount.

  • perfect. Following his example I was able to include some actions in the function, the sum in parallel only of the selects, hide the subtotal if the respective selectbox is not selected, hide the total (if the sum is zero), https://jsfiddle.net/8uk440do/18/ worked perfectly, I’m going to open up a new question so that you can direct me to any part with redundancy in the code. Based on your previous answers, there probably is. Thanks for the help ;)

  • Good morning Sergio. Basically what changes to the use of each() methodology in a structure of "Divs", without table structure, tfoot, tr... ? I am here trying to apply the last learning that you have passed me.

  • @Danilofagundes have an example in jsFiddle of this structure?

  • Hello beast, following the logic you gave me and on the basis of trial and error I managed to make it work. I managed to include the bootstrap too, for me this is all new, so sorry if I sometimes ask too much. Follow the link of the model run without the table structure. https://jsfiddle.net/yne288ar/ I tried to optimize more but errors appeared. Thanks for the lessons Sergio

  • @Good Danilofagundes! I see no mistakes, seems to me well at first glance.

Show 8 more comments

2

The line commented on in your example:

// $('select').prop('selectedIndex', 0);

was already very close to the solution. The problem is that $('select') returns all page selects, and then all were reset when any checkbox was marked.

You can restrict only to select within the cell you are hiding. Only use the id of her cell:

$('#e' + index + ' select').prop('selectedIndex', 0)

  • Gabe using an ID for each td sounds too customized to me. I find it simpler to go by kinship relationships in the DOM than to have Ids in each td which are strings that need to be worked to use only chunks.

  • @Sergio I fully agree. I just tried to make the most of the code that was already there, to help with understanding, but the code in your answer is definitely more "elegant"

0

A very easy way to do this, for example, by value of the option you want to select...in the example I select the value emptiness:

$('#id option[value=""]').attr('selected', 'selected');

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.