jQuery change selected=selected on change selectbox

Question

So I got this HTML it comes straight out of Joomla so forgive me for a bit of a mess:

// 1
<select id="jform_params_wrapper_threed_typeofcontent1" name="jform[params][wrapper][threed_typeofcontent1]" class="chzn-done" >
  <option value="video">Video</option>
  <option value="image">Image</option>
  <option value="disabled" selected="selected">Disabled</option>
</select>

// 2
<select id="jform_params_wrapper_threed_contentlink1type" name="jform[params][wrapper][threed_contentlink1type]" class="chzn-done" >
  <option value="default">Default</option>
  <option value="modal" selected="selected">Modal</option>
</select>

// 3
<select id="jform_params_wrapper_threed_contentmodal1type" name="jform[params][wrapper][threed_contentmodal1type]" class="chzn-done" >
  <option value="select">Select a option</option>
  <option value="image" selected="selected">Image</option>
  <option value="video">Video</option>
  <option value="iframe">Iframe</option>
</select>

What I try to achieve: If selectbox 1 is changed the values from 2 & 3 become default & select If selectbox 2 is changed the value from 3 becomes select

What I have tried:

https://jsfiddle.net/vbLzer1j/1/

https://jsfiddle.net/4f5qc5z7/1/

Both of them work you might think but they don't as the selected="selected" stays at the same position as it was when the page loaded. I need that to change when one of those jQuery functions (see the fiddles) are called.

Do I need to target it with .attr?

Full Joomla Code for Selectbox 1

<div class="controls">
 <select id="jform_params_wrapper_threed_typeofcontent1" name="jform[params][wrapper][threed_typeofcontent1]" class="chzn-done" style="display: none;">
    <option value="video" selected="selected">Video</option>
    <option value="image">Image</option>
    <option value="disabled">Disabled</option>
 </select>
 <div class="chzn-container chzn-container-single chzn-with-drop chzn-container-active" style="width: 220px;" title="" id="jform_params_wrapper_threed_typeofcontent1_chzn">
  <a class="chzn-single" tabindex="-1">
   <span>Video</span>
   <div><b></b></div>
  </a>
  <div class="chzn-drop">
   <div class="chzn-search">
    <input type="text" autocomplete="off">
   </div>
   <ul class="chzn-results">
    <li class="active-result result-selected highlighted" style="" data-option-array-index="0">Video</li>
    <li class="active-result" style="" data-option-array-index="1">Image</li>
    <li class="active-result" style="" data-option-array-index="2">Disabled</li>
   </ul>
  </div>
 </div>
</div>

Dhara Parmar · Accepted Answer · 2016-05-30T11:02:49.977

1

You can change value of selectbox by just using .val():

Demo : https://jsfiddle.net/dnjzevuy/

$(document).ready(function() {

    $('#jform_params_wrapper_threed_typeofcontent1').bind('change', function (e) {
          $("#jform_params_wrapper_threed_contentlink1type").val('default');
          $("#jform_params_wrapper_threed_contentmodal1type").val('select');
    }).trigger('change');

    $('#jform_params_wrapper_threed_contentlink1type').bind('change', function (e) {
          $("#jform_params_wrapper_threed_contentmodal1type").val('select');
    }).trigger('change');

});

OR

 $(document).ready(function() {

    $('#jform_params_wrapper_threed_typeofcontent1').bind('change', function (e) {
      $("#jform_params_wrapper_threed_contentlink1type option[value='default']").prop("selected","selected");
      $("#jform_params_wrapper_threed_contentmodal1type option[value='select']").prop("selected","selected");
    }).trigger('change');

    $('#jform_params_wrapper_threed_contentlink1type').bind('change', function (e) {
      $("#jform_params_wrapper_threed_contentmodal1type option[value='select']").prop("selected","selected");
    }).trigger('change');

 });

edited May 30 '16 at 11:02

answered May 30 '16 at 10:43

Dhara Parmar

8,021
1
16
27

Thank you. I made a slight mistake my 2nd fiddle suppose to have the .val values. And yes it works at first sight but if you look in the inspector you see that the `selected="selected"` stays at the same position. I added a picture. The green line needs to change. So if the first checkbox is changed that green line is supposed to go one up. @dhara-parmar – purple11111 May 30 '16 at 10:52
no..actually whichever value we have been set with .val() will only be posted in php... – Dhara Parmar May 30 '16 at 10:57
Let me ask it different then. How to get the green line to move a position upwards. Because the .val(); will not work in Joomla this still requires the page to be refreshed by saving the extension. And it would be a bit ridiculous to have to save the extension every time a selectbox is changed. Thank you for answering and taking the time to troubleshoot. Appreciate it! – purple11111 May 30 '16 at 11:01
or to set selected property you can use .prop(). i have updated answer above..you can see that – Dhara Parmar May 30 '16 at 11:03
I am sure that your added code works in 99% of the worlds applications except for Joomla. I am however grateful for all the codes you have given me. I think they are almost the same as: http://stackoverflow.com/questions/4680075/set-selected-option-of-select-box which was the first post I tried everything from and all of it has now confused the crap out of me. I can't understand why on save it works but nothing else. And in every freaking fiddle all your codes work and all mine as well??? Let me update my question with on entire control code from Joomla. – purple11111 May 30 '16 at 11:08
Now I am looking at it this way I can see the problem it is not updating the LI. What do you think? – purple11111 May 30 '16 at 11:15

jQuery change selected=selected on change selectbox

1 Answers1