Question

我根据从选择

中选择的值，显示/隐藏效果很好

$( document ).ready( function () {
   $("#fac_name").change(function() {
     var value = this.value;
     if (value == "other") {
      $("#otherFAC").show( "slow" );
     } else {
      $("#otherFAC").hide( "slow" ); 
            }
        } );
    } );

我遇到问题的地方 - 也可以直接从数据库中设置值...

<?php
    if ( $p['foo'] == 'foo' ) {
     echo 'selected="selected"';
   }
?>

我错过了在文档加载时获取值所需的任何内容并继续设置show / hide ......

通过添加：

，我已经为所有单选按钮工作了

$( '[name="travel_comp_num"]:checked' ).trigger( 'click' );

....但我似乎无法将其翻译成我的选择。需要一些帮助，请...

Answer 1

由于您已经处理了下拉列表更改事件，因此在页面加载时，您只需要set the selected option的其他部分。

因此，请避免对选项属性进行硬编码（删除它）：

<?php
  if ( $p['foo'] == 'foo' ) {
    echo 'selected="selected"';
  }
?>

修改此部分以更改页面加载时的选择值：

var facNameInitialValue = "<?= $p['foo'] ?>";
$("#fac_name").change(function() {
  $("#otherFAC").toggle(this.value == "other");
})
.val(facNameInitialValue);

Answer 2

一种解决方案是默认隐藏#otherFAC元素，并在页面加载时调用hide / show函数，除了将其绑定到change事件之外（在我的回答中我称之为函数{{1 }}）。

由于在事件处理程序之外调用了hideOrShow()，因此必须将hideOrShow()更改为this.value。或者，$('#fac_name')可以保留，但必须使用this.value方法调用hideOrShow()以将.call()设置为this元素。

尝试在此代码段中为select#fac_name设置不同的元素，您将看到它具有所需的行为。

希望这有帮助。

＆＃13;

selected

＆＃13;

$( document ).ready( function () {
  
  function hideOrShow(){
    var value = $('#fac_name').val();
    //var value = this.value;
    if (value == "other") {
      $("#otherFAC").show('slow');
    } else {
      $("#otherFAC").hide('slow'); 
    }
  }
  
  $("#fac_name").change(hideOrShow);
  
  hideOrShow();
  // hideOrShow.call($('#fac_name')[0]);
});

＆＃13;

#otherFAC {
  display:none;
}

＆＃13;

Answer 3

一个php解决方案就是在隐藏它的元素上添加一个类相同的行：

<select name="something1" id="fac_name" class="selectObserver" data-acton='#otherFAC'>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="other" <?php
    if($isToggled = $p['foo'] == 'foo') {
     echo 'selected="selected"';
   }
?>>Other</option>
</select>
<div id="otherFAC" <?php if($isToggled) echo ' class="hideOnLoad"' ?>>Something 1</div>

显示/隐藏选择，数值来自数据库

3 个答案: