javascript - 显示隐藏字段取决于在线选择值共享点

问题描述

我有一个包含 2 列的列表，第一列是“City”，它是选择类型。第二列是“Other”，它是单行文本。当用户在城市中选择“其他”时，我希望出现“OtherCity”列，如果他选择其他选择，我想隐藏。我使用简单的 javascript 编写代码，我不想使用任何库，只是使用 javascript 中的简单代码。

<script type="text/javascript">
  function mySelectfunction(){
  getValue = document.getElementById("City").value;
  if(getValue == "other"){                     
    document.getElementById("OtherCity").style.display ="none";
  }else{                   
    document.getElementById("OtherCity").style.display ="block";
  }
}
 </script>

但它不起作用。你能帮忙让它工作吗？*另一个问题：如果我要隐藏类型的第二列是“查找”，代码会有所不同吗？

标签： javascriptsharepoint

我的测试代码供大家参考，Choice 和lookup 列不需要改代码。

在 NewForm 中添加一个脚本编辑器，并将代码插入其中（替换列名）。

 <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
    <script src="https://xxxx.sharepoint.com/sites/dev/SiteAssets/sputility.js">

</script>

    <script>
    $(document).ready(function () {
        // Get a single select dropdown field
        var relacionField = SPUtility.GetSPField('CityLookUp');

        // create a function to show or hide Rates based on Rate value
        var showOrHideField = function() {
            var relacionFieldValue = relacionField.GetValue();
            // Hide the Rates field if the selected value is Especial
            if(relacionFieldValue === 'other') {
                SPUtility.ShowSPField('Other')
            }
            else {
                SPUtility.HideSPField('Other')
            }
        };

        // run at startup (for edit form)
        showOrHideField();

        // make sure if the user changes the value we handle it
        $(relacionField.Dropdown).on('change', showOrHideField);
    });

    </script>

你可以在这里下载 sputility.js：https ://archive.codeplex.com/?p=sputility

更新：

上面的代码有报错吗？

JavaScript 代码：

ExecuteOrDelayUntilScriptLoaded(show,"sp.js");
  function show () {
  //Get the select element corresponding to column
    var selectElement=document.getElementById('CityLookUp').parentNode.parentNode.childNodes[3].childNodes[3].childNodes[0];//chnage coulmn name
    //get tr the hidden column located
    var trElement=document.getElementById('Other').parentNode.parentNode;//change column name 
    //hide tr when we get into page,if the default value is 'other' ,do not need this
    trElement.style.display='none';
    //select change event 
    selectElement.onchange =  function () {
     var index = selectElement.selectedIndex;
     //get option value
    var value = selectElement.options[index].text;

      if(value==='other'){
      //show  tr element
        trElement.style.display='';
      }else{
      //hide  tr element
        trElement.style.display='none';
      }
    }
  }

代码思路是找到对应的select元素，根据option的值决定是否隐藏other列所在的tr元素。

提示：我们的页面 dom 结构可能会有所不同，因此您可能需要根据您的页面 dom 结构修改代码。您可以通过 Developer tool 查看您的页面 dom 结构。测试结果：

javascript - 显示隐藏字段取决于在线选择值共享点

问题描述

解决方案

推荐阅读