选择jQuery更改=在更改选择框

Question

所以我得到了这个HTML，它直接来自Joomla所以原谅我有点乱：

// 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>

我尝试实现的目标： 如果selectbox 1被更改，则值为2＆amp; 3成为默认＆amp;选择 如果更改了选择框2，则3中的值将变为选择

我尝试过：

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

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

他们都可以思考，但他们不会因为selected="selected"停留在与加载页面时相同的位置。当需要调用其中一个jQuery函数（请参阅fiddles）时，我需要进行更改。

我是否需要使用.attr？

进行定位

Selectbox 1的完整Joomla代码

<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>

Answer 1

您只需使用.val（）：

即可更改选择框的值

演示：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');

 });