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 和 3 的值将变为默认值 & select 如果 selectbox 2 被更改，值从 3 变为 select

我尝试过的：

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

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

您可能认为它们都可以工作，但实际上并没有，因为 selected="selected" 保持在与页面加载时相同的位置。当调用其中一个 jQuery 函数（参见小提琴）时，我需要更改它。

我需要用 .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');

 });

jQuery 更改选择=更改选择框时选择

jQuery change selected=selected on change selectbox

javascript

jquery

html

joomla

joomla3.0