jquery 如何在JS中保留字段的值

uqzxnwby  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(141)

我有一个多选字段,其值来自一个具有以下数据的表。

Desc      | Code
----------------
India     | IN
Australia | AUS
Other     | OTH

**要求:**在该多选字段中,如果Other,则新字段将填充为Please specify (Others),我们将在其中添加一些文本值。

1.如果我选择India, Other, Australia然后Please specify (others)应启用和用户写的文本应保留在请指定其他字段。
1.如果我选择India, Other,然后删除Other,再选择other,那么Please specify(others)的值应该是空的。

**问题:**当我选择India, Other, Australia时,Please specify (others)字段值将被取消。

我的尝试:

function showHideOthers() {
    var selectedValue = $("#field_id_ui").val();
    if (null !== selectedValue) {
        for (var i = 0; i < selectedValue.length; i++) {
            if (selectedValue[i] == "OTH") {
                $("#Others_section").show();
            } else {
                $("#Others_section").hide();
                $("#Others_section").val("");
            }
        }
    } else {
        $("#Others_section").hide();
        $("#Others_section").val("");
    }
}

show和hide字段是从review文件中获取的。
"#field_id_ui"-以数组的形式存储所有选定的值。例如[AUS,IN,OTH]

piok6c0g

piok6c0g1#

根据$("#field_id_ui").val()的内容隐藏“其他”的逻辑有点错误。这里有一个简单的方法,你可以试试。请参阅Array.includes的文档。

function showHideOthers() {
    var selectedValue = $("#field_id_ui").val();
    // the rest of the code assumes that selectedValue is an array
    if (selectedValue.includes("OTH")) {
      $("#Others_section").show();
    } else {
      $("#Others_section").hide();
      $("#Others_section").val("");
    }
}
hpxqektj

hpxqektj2#

您的问题与此代码有关:

if (selectedValue[i] == "OTH") {

它运行在 every 循环上。因此,如果您选择的值为["OTH", "IND"],则会显示其他输入,然后立即被“IND”值隐藏。
if中添加一个break,无论选择值的顺序如何,代码都可以正常工作。

  • 这假设你的HTML是建立匹配提供的JavaScript*(我们还没有看到)。

更新的代码

function showHideOthers() {
  var selectedValue = $("#field_id_ui").val();
  //console.log(selectedValue);

  if (null !== selectedValue) {
    for (var i = 0; i < selectedValue.length; i++) {
      if (selectedValue[i] == "OTH") {
        $("#Others_section").show();
        
        // with break; code stops as soon as OTH is found
        break;
      } else {
        $("#Others_section").hide();
        $("#Others_section").val("");
      }
    }
  } else {
    $("#Others_section").hide();
    $("#Others_section").val("");
  }
}

$("#field_id_ui").change(showHideOthers);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id='field_id_ui'>
  <option value="IND">India</option>
  <option value="OTH">Other</option>
</select>
<input id='Others_section' />

如果OTH不是最后一个值,则会显示代码不工作

function showHideOthers() {
    //var selectedValue = $("#field_id_ui").val();
    //console.log(selectedValue);
    
    // other at the start fails
    selectedValue = ["OTH", "IND"];
    // other at the end works fine
    //selectedValue = ["IND", "OTH"];
    
    if (null !== selectedValue) {
        for (var i = 0; i < selectedValue.length; i++) {
          if (selectedValue[i] == "OTH") {
            $("#Others_section").show();
          } else {
                $("#Others_section").hide();
                $("#Others_section").val("");
            }
        }
    } else {
        $("#Others_section").hide();
        $("#Others_section").val("");
    }
}

//$("#field_id_ui").change(showHideOthers);
showHideOthers();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id='field_id_ui'>
<option value="IND">India</option>
<option value="OTH">Other</option>
</select>
<input id='Others_section'/>

如果OTH是最后一个值,则显示代码工作的脚本

function showHideOthers() {
    //var selectedValue = $("#field_id_ui").val();
    //console.log(selectedValue);
    
    // other at the start fails
    //selectedValue = ["OTH", "IND"];
    // other at the end works fine
    selectedValue = ["IND", "OTH"];
    
    if (null !== selectedValue) {
        for (var i = 0; i < selectedValue.length; i++) {
          if (selectedValue[i] == "OTH") {
            $("#Others_section").show();
          } else {
                $("#Others_section").hide();
                $("#Others_section").val("");
            }
        }
    } else {
        $("#Others_section").hide();
        $("#Others_section").val("");
    }
}

//$("#field_id_ui").change(showHideOthers);
showHideOthers();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id='field_id_ui'>
<option value="IND">India</option>
<option value="OTH">Other</option>
</select>
<input id='Others_section'/>

相关问题