Using more than 1 val in jQuery

Question

There is probably a very simple solution to this but my jQuery skills are not yet up to much. I am using the below to show and hide a div based on the valus on a dropdown. I would like to adapt it so both "No" and "" will work. How do i achive this?

Thanks in advance

$('#q1').change(function(){
 if ($(this).val() == "No") {
 $('#divv').show();
 } else {
 $('#divv').hide();
 }
 });

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

You can use the JavaScript logical or operator (||) in this case:

$('#q1').change(function() {
    value = this.value;
    if (value == "No" || value == "") {
        $('#divv').show();
    } else {
        $('#divv').hide();
    }
}
);

Actually the most adaptable solution would be this: if (value.toLowerCase() == "no" || value == "") { This would accept "No" no matter what case it's in.

Demo: http://jsfiddle.net/SO_AMK/YKeFy/1/

EDIT: Updated code to satisfy Kolink and Bergi

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 03 '12 at 18:31

A.M.K

16,727
4
32
64

Inefficient due to creating the same `$(this)` object twice. – Niet the Dark Absol Aug 03 '12 at 18:56
http://w3fools.com/ - especially for logical operators, there are much better references – Bergi Aug 03 '12 at 18:57
@Kolink Please read: http://stackoverflow.com/privileges/vote-down very carefully, you virtually, and maybe literally, downvoted every answer but your own. – A.M.K Aug 03 '12 at 19:19
@A.M.K I had reasons to downvote them. This one because of the object inefficiency, but I see that's now been fixed. Now my downvote is there because of the `value == "null"`, which I have no idea why it's there... – Niet the Dark Absol Aug 03 '12 at 19:22
I mistakenly thought that if a dropdown item had no value then it would return null, I tested and removed it. – A.M.K Aug 03 '12 at 19:59

Curtis · Answer 2 · 2012-08-05T13:00:13.880

0

Use the javascript OR operator (||):

$('#q1').change(function(){
 var thisVal = $(this).val();
 if ((thisVal == "No") || (thisVal == "")) {
 $('#divv').show();
 } else {
 $('#divv').hide();
 }
 });

edited Aug 05 '12 at 13:00

answered Aug 03 '12 at 18:31

Curtis

101,612
66
270
352

Inefficient due to creating the same `$(this)` object twice. – Niet the Dark Absol Aug 03 '12 at 18:56
@Kolink - could you please explain a little further as to how referencing `this` is more inefficient than a variable ? – adeneo Aug 03 '12 at 19:14
Creating an entire jQuery object around `this` is what's inefficient. – Niet the Dark Absol Aug 03 '12 at 19:22
@Kolink `$(this)` object is only created once now, then referenced twice :) – Curtis Aug 04 '12 at 14:41
Now you're calling the `val()` function on it twice. – Niet the Dark Absol Aug 05 '12 at 01:13
@Kolink Not as costly as calling `$(this)` twice, but fair enough.. I've changed that too. This is just an example of using the `||` operator though really, not a lesson in performance. – Curtis Aug 05 '12 at 13:01

Niet the Dark Absol · Accepted Answer · 2012-08-03T18:59:56.213

0

There are a number of ways. Personally I'd do this:

if( this.value.match(/(No)?/i)) {

The i allows NO, no and nO to also work - remove it if you only want "No".

edited Aug 03 '12 at 18:59

answered Aug 03 '12 at 18:31

Niet the Dark Absol

320,036
81
464
592

This was going to be a later question about the case, thank you very much! – Legs Aug 03 '12 at 18:54
If this answer solved your question, please consider marking it as Accepted by clicking the check mark underneath the vote score. – Niet the Dark Absol Aug 03 '12 at 18:57
No reason. I just prefer to use `match` since it's similar to `preg_match` in PHP. – Niet the Dark Absol Aug 03 '12 at 18:58

score 0 · Answer 4 · edited May 23 '17 at 11:43

The logical OR operator should do:

$('#q1').change(function(){
    if (this.value == "No" || this.value == "") {
        $('#divv').show();
    } else {
        $('#divv').hide();
    }
});

I have not used $(this) (especially not twice) to create jQuery objects, but just used plain javascript. Even more concise, if you want (using a tertiary operator, the not operator to check for an empty string and bracket notation):

$('#q1').change(function(){
    $('#divv')[ (this.value == "No" || !this.value) ? "show" : "hide" ]();
});

adeneo · Answer 5 · 2012-08-03T19:01:42.127

0

You can use toggle() and set the state to show or hide by checking the value with a regex.

$('#q1').on('change', function(){
    $('#divv').toggle(this.value.match(/(no|^$)/i));
});

FIDDLE

edited Aug 03 '12 at 19:01

answered Aug 03 '12 at 18:56

adeneo

312,895
29
395
388

score -1 · Answer 6 · answered Aug 03 '12 at 18:33

-1

copy and Paste this, this should work.

$('#q1').change(function(){
 if (($(this).val() == "No") || ($(this).val() == "")) {
 $('#divv').show();
 } else {
 $('#divv').hide();
 }
 });

answered Aug 03 '12 at 18:33

defau1t

10,593
2
35
47

Using more than 1 val in jQuery

6 Answers6