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

我试图实现的目标:如果选择框 1 更改，则 2 和 3 中的值将变为默认值并选择如果选择框 2 更改，则 3 中的值将变为选择

我尝试过的:

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

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

您可能会认为它们都可以工作，但事实并非如此，因为 selected="selected" 保持在与页面加载时相同的位置。当调用其中一个 jQuery 函数(请参阅 fiddle )时，我需要更改它。

我需要使用 .attr 来定位它吗？

选择框 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');

});

或者

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

 });