Question

免责声明：我真的不知道如何使用jquery（或做许多其他事情）。

我有一个从数据库填充的下拉菜单，并且基于该下拉选择填充了一些隐藏的输入字段。在下拉菜单中选择一个选项后，此操作：

<input class="form-control" type="hidden" name="suporlochtml" id="suporlochtml"/>

更改为...

<input class="form-control" type="hidden" name="suporlochtml" id="suporlochtml" value="local"/>

...正在按预期工作。

我希望能够基于该隐藏字段的值在页面上显示或隐藏div。目前，该值可以是“ superior”或“ local”

阅读以下内容后：jQuery - Detect value change on hidden input field我觉得它需要额外的代码来检测对隐藏输入字段的更改。

基于此，我正在尝试以下方法：

<script>

function setUserID(myValue) {
     $('#suporlochtml').val(myValue)
         .trigger('change');
}

$('#suporlochtml').change(function(){
    if ($('#suporlochtml').val() == "local") {   
        $("#superiorcourt").hide();
    }
    else {
        $("#superiorcourt").show();
    }
});

</script>

我想在“ superior”是隐藏字段中的值时显示此div：

<div class="superiorcourt" id="superiorcourt">
</div>

当隐藏字段中的值是“ local”时，我想显示此div：

<div class="localcourt" id="localcourt">
</div>

现在，当下拉列表（因此隐藏字段值）发生更改时，什么也不会发生。两个div仍然显示。

由于我真的不知道如何使用jquery / javascript，所以我不知道这是语法错误还是无法解决。当我检测到用户直接通过涉及以下内容的代码控制的下拉列表的更改时，便能够达到预期的效果：

 $("select").change(function(){

但是，如果我能弄清楚如何使用该隐藏字段值，它将节省大量工作。

任何建议都值得赞赏。

Answer 1

您最初可以像这样隐藏两个divs：

.superiorcourt,
.localcourt {
opacity: 0;
}

.superiorcourt.show,
.localcourt.show, {
opacity: 1;
}

您可以像这样从input获取值：

let suporlochtmlValue = document.querySelector('[name="suporlochtml"]').value;

一旦有了值，就可以将类.show添加到相应的div：

document.getElementsByClassName(suporlochtmlValue + 'court').classList.add('show');

工作示例：

let suporlochtml = document.querySelector('[name="suporlochtml"]');

function showDiv() {
document.getElementsByClassName('superiorcourt')[0].classList.remove('show');        document.getElementsByClassName('localcourt')[0].classList.remove('show');
    document.getElementsByClassName(suporlochtml.value + 'court')[0].classList.add('show');
}

suporlochtml.addEventListener('change', showDiv, false);

form, div {
float: left;
margin-right: 12px;
}

div {
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
font-weight: bold;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
}

.superiorcourt,
.localcourt {
opacity: 0;
}

.superiorcourt.show,
.localcourt.show {
opacity: 1;
}

<form>
<select name="suporlochtml">
<option value="initial">Initial</option>
<option value="local">Local</option>
<option value="superior">Superior</option>
</select>
</form>

<div class="superiorcourt">Superior<br />Court</div>
<div class="localcourt">Local<br />Court</div>

Answer 2

还需要查看与下拉列表相关的逻辑，因为用于显示/隐藏div的代码从根本上没有错，只是做了一些小的改进，请参见：

public void findOccuranceMethod()
{
    string str = "The Haunting of Hill House!";
    Console.WriteLine("String: " + str);
    string occurString = "o";
    string replaceString = "MDDS";

    var array = str.Split(new[] { occurString }, StringSplitOptions.None);
    var count = array.Length - 1;
    string result = string.Join(replaceString, array);

    Console.WriteLine("String after replacing a character: " + result);
    Console.WriteLine("Number of replaces made: " + count);
    Console.ReadLine();

}

[TestMethod()]
public void findOccuranceMethodTest()
{
    // Arrange
    string expected = "The Haunting MDDSf Hill HMDDSuse!";

    // Act
    var result = new findOccurance();

    // Assert
    Assert.AreEqual(expected, result);
}

但是您的下拉菜单逻辑可能不正确，并且无法正确设置隐藏输入的值？

根据更改时隐藏输入字段的值隐藏或显示div

2 个答案: