Javascript/jQuery - Add class from option list (dropdown)

Question

So I have a list of filters when on clicked on it it should add a class to the img, so when clicked on the filter brannan it should add class='brannan' to the img, the option and value are identical to the class one. How can I know addClass(); to the image, for example, if I select the filter brannan it should add the class brannan to the img.

<div class="form__field">
        <img id="preview" src="#" alt="Image preview" />
</div>

 <div class="form__field">    
        <select name="filter">
            <option value="_1977">1977</option>
            <option value="aden">aden</option>
            <option value="brannan">brannan</option>
            <option value="brooklyn">brooklyn</option>
            <option value="clarendon">clarendon</option>
        </select>

I'm assuming the code will follow something like onchange on the select -> get value of it -> addClass();

Kiran Shahi · Accepted Answer · 2018-05-10 10:35:12Z

2

add class using addClass() function on change() event. Also remove the class using removeClass

$("select[name='[filter]'").on('change',function(){
  var prevClass = $('img').attr('class');
  $('img').removeClass(prevClass);
  $('img').addClass($(this).val());
});

<div class="form__field">
        <img id="preview" src="#" alt="Image preview" />
</div>

 <div class="form__field">    
        <select name="filter">
            <option value="_1977">1977</option>
            <option value="aden">aden</option>
            <option value="brannan">brannan</option>
            <option value="brooklyn">brooklyn</option>
            <option value="clarendon">clarendon</option>
        </select>

answered May 10, 2018 at 10:35

Kiran Shahi

8,0109 gold badges41 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rory McCrossan Over a year ago

Just FYI you can use removeClass() with no arguments to remove all classes. Therefore you can simplify this to just $('img').removeClass().addClass($(this).val());

Kiran Shahi Over a year ago

@RoryMcCrossan exactly, we also can do that. :) Thank you for your sweet suggestion friend.

user9019817 · Accepted Answer · 2018-05-10 10:38:14Z

You're right about needing an onChange function then you can just set the class to that of the value:

var selectElem = document.querySelector('.form__field select');

selectElem.onchange = function() {
  document.querySelector('#preview').className = this.value;
}

<div class="form__field">
        <img id="preview" src="#" alt="Image preview" />
</div>

<div class="form__field">    
        <select name="filter">
            <option value="_1977">1977</option>
            <option value="aden">aden</option>
            <option value="brannan">brannan</option>
            <option value="brooklyn">brooklyn</option>
            <option value="clarendon">clarendon</option>
        </select>
</div>

Muhammad Usman · Accepted Answer · 2018-05-10 10:32:47Z

Add an onchange listener on select and add the selected value as class to the div where you want it

$("select").change(function(){
     console.log("Adding class ",$(this).val())
    $("#preview").removeClass();
    $("#preview").addClass($(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form__field">
        <img id="preview" src="#" alt="Image preview" />
</div>
<select name="filter">
            <option value="_1977">1977</option>
            <option value="aden">aden</option>
            <option value="brannan">brannan</option>
            <option value="brooklyn">brooklyn</option>
            <option value="clarendon">clarendon</option>
        </select>

Note: You don't want to keep the previously added class in img so $("#preview").removeClass(); is to remove all previously added classes and add the current important class

Mamun · Accepted Answer · 2018-05-10 10:53:22Z

1

Try the following with jQuery's change, addClass() and removeClass():

var classToRemove = '';
$('[name=filter]').change(function(){
  $('#preview').removeClass(classToRemove);
  $('#preview').addClass($(this).val());
  classToRemove = $(this).val();
  
  //For demonstration
  console.log($('#preview').attr('class'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form__field">
  <img id="preview" src="#" alt="Image preview" />
</div>

<div class="form__field">    
<select name="filter">
  <option value="_1977">1977</option>
  <option value="aden">aden</option>
  <option value="brannan">brannan</option>
  <option value="brooklyn">brooklyn</option>
  <option value="clarendon">clarendon</option>
</select>

edited May 10, 2018 at 10:53

answered May 10, 2018 at 10:33

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

Kavian K. · Accepted Answer · 2018-05-10 11:03:28Z

It is better to use the input event instead of the change event for more browser compatibility.

$( '[name=filter]' ).on( 'input propertychange', function() {
	$( '#preview' ).removeClass().addClass( ($( this ).val() ) );
	console.log( 'The image has a class named: ' + $( '#preview' ).attr( 'class' ) )
});

#preview {
  width: 100px;
  height: 100px;
  border-width: 5px;
  border-style: solid
}
.default {
  border-color: black
}
.blue {
  border-color: blue
}
.yellow {
  border-color: yellow
}
.red {
  border-color: red
}
.green {
  border-color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form__field">
	<img id="preview" src="https://www.gravatar.com/avatar/ef95d6eafc29a0cd76af27acc45da6dd?s=328&d=identicon&r=PG&f=1" alt="Image preview" class="default" />
</div>

<div class="form__field">    
	<select name="filter">
		<option value="default">Default</option>
		<option value="blue">Blue</option>
		<option value="yellow">Yellow</option>
		<option value="red">Red</option>
		<option value="green">Green</option>
	</select>
</div>

Collectives™ on Stack Overflow

Javascript/jQuery - Add class from option list (dropdown)

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related