CODEWITHSUNDEEP
javascriptjqueryhtmljoomlajoomla3.0
purple11111
purple11111

Reputation: 719

jQuery change selected=selected on change selectbox

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?

enter image description here

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>

Upvotes: 0

Views: 612

Answers (1)

Dhara Parmar
Dhara Parmar

Reputation: 8101

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');

 });

Upvotes: 1

Related Questions