Using jQuery to toggle between two elements and updating the SELECT field

Question

Using jQuery to toggle between two elements and updating the SELECT field

<div class="r_row">
<div class="row field_currency">
    <div class="f_row"><label class="" for="currency">Currency</label></div>
    <div class="r_row"> 
    <select id="currency" name="currency" class=" select">
<option value="ron" >USD</option>
<option value="eur" selected="selected">EUR</option>
</select>
        <div class="error context" id="error_currency"></div>
    <div class="hint context" id="hint_currency"></div>
    <span class="checked">&nbsp;</span>
    <div class="fancy_select"><div class="first" value="USD">USD</div><div   class=" last" value="eur">EUR</div>
<br clear="all">
</div></div>

    <br style="clear:both">
    </div>

</code></pre>

I would like to implement a functionality using two divs

<div>USD</div><div>EUR</div>

, and with the assistance of jQuery, if I click on USD, it should update the value of the Select box and add a custom class to the USD div. Similarly, clicking on EUR should change the select value to EUR, remove the class from USD, and apply that class to EUR. How can this be achieved? Your guidance is much appreciated.

javascript jquery html css

Answer 1

Answer №1

Here is a solution you can try:

<script>
$(document).ready(function(){
     $('.main').click(function(){
         $('.main').addClass('selectedClass');
         $('.secondary').removeClass('selectedClass');
         $('option[value=apple]').prop("selected", true);
     });
     $('.secondary').click(function(){
         $('.secondary').addClass('selectedClass');
         $('.main').removeClass('selectedClass');
         $('option[value=banana]').prop("selected", true);
     });
});
</script>

Answer 2

Here is a solution you can try:

<script>
$(document).ready(function(){
     $('.main').click(function(){
         $('.main').addClass('selectedClass');
         $('.secondary').removeClass('selectedClass');
         $('option[value=apple]').prop("selected", true);
     });
     $('.secondary').click(function(){
         $('.secondary').addClass('selectedClass');
         $('.main').removeClass('selectedClass');
         $('option[value=banana]').prop("selected", true);
     });
});
</script>

Using jQuery to toggle between two elements and updating the SELECT field

Answer №1

Similar questions

Receiving a notification when attempting to log in with incorrect credentials

Server encountered an unexpected T_STRING error that was not present on the localhost

Run JavaScript when ColdFusion page is being loaded

JavaScript code for sorting a list of objects alphabetically according to a different list

Retrieving information from MySQL using javascript

Understanding Plotly: The distinction between mode and add_trace

Using Javascript with the Google Calendar API: How can I swiftly make a new event with the Quick Add feature?

Save Bson query as a Javascript log

Effortlessly uploading large files using axios

Transitioning one element's opacity to zero while concurrently increasing another element's opacity to replace it

What is the process for loading Syntax Highlighter on pages with pre tags?

Implementing a dynamic loading strategy for Google reCAPTCHA based on language selection

Switch out a specific string within a JavaScript object

Do async functions in javascript function synchronously in reality?

CSS tabs are not functioning properly as hyperlinks

Modifying the content in one form field based on the information entered in another input field

What is the best way to retrieve response data from php using ajax in a single file?

Extracting the video identifier from YouTube's embed code

Avoid modifying the HTML DOM structure after utilizing the JQuery Load() method

Is there a way to automatically remove the upload button after the file has been successfully uploaded?