javascript - jQuery动态输入另一个Input的值

Question

我试图在页面上显示三个项目。前两个不是问题。如果需要更多详细信息，第三个取决于第二个选择选项中选择的内容。第三个选项根据第二个选项隐藏或显示。所以没有问题。代码在这里:

// Create a Javascript class to handle the form.
function InquiryCardForm() {
    var objSelf = this;

    // Get a jQuery reference to the form.
    this.Form = $( "#inqueryCard-form" );

    // Get jQuery references to the key fields in our contact
    // form. This way, we don't have to keep looking them up.
    // This will make it faster.
    this.DOMReferences = {
        // Form elements
        ID: this.Form.find( "input[ name = 'id' ]" ),
        SourceCode: this.Form.find( "input[ name = 'sourceCode' ]" ),
        SourceValue: this.Form.find( "select[ name = 'source' ]" ),
        SourceText: this.Form.find( "input[ name = 'other"
            +this.Form.find( "input[ name = 'sourceCode' ]" ).val()
            +this.Form.find( "select[ name = 'source' ]").val() +"' ]" )
    };

所以我有 HTML:

<form action="" method="post" name="inqueryCard" id="inqueryCard-form">
...
    <tr>
        <td>
            <input type="hidden" name="sourceCode" value="SRCE">
            <select id="source" name="source">
                <option value="" selected>*** Select ***</option>
                <option value="1" data-more="N">Web Search</option>
                <option value="2" data-more="N">Word Of Mouth</option>
                <option value="3" data-more="O">Other</option>
                <option value="4" data-more="R">Other</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <div id="otherDIV_SRCE1">
                <p> <input type="text" name="otherSRCE1" value="" /></p>
            </div>
            <div id="otherDIV_SRCE2">
                <p> <input type="text" name="otherSRCE2" value="" /></p>
            </div>
            <div id="otherDIV_SRCE3">
                <p>Please Specify <input type="text" name="otherSRCE3" value="" /></p>
            </div>
            <div id="otherDIV_SRCE4">
                <p>Must Share <input type="text" name="otherSRCE4" value="" /></p>
            </div>
        </td>
    </tr>

这里的问题是 SourceText 对象不是一个对象。我根据“源”的选择隐藏或显示 div。

请注意，我能够在“提交表单”功能上实现此功能，如下所示

var code = objSelf.DOMReferences.SourceCode.val();
var value = objSelf.DOMReferences.SourceValue.val();
var SourceText = objSelf.Form.find( "input[ name = 'other" + code + value + "' ]" );

但我想在 this.DOMReferences 中执行此操作。由于我在此页面上还有大约 21 个其他项目，它们的工作方式与此非常相似。

提前谢谢您。 (第一次发布任何内容，如果我忘记了应该在这里发布的内容，请告诉我)

Answer 1

请更新您的功能:

function InquiryCardForm() 
{
    var objSelf = this;

    this.Form = $( "#inqueryCard-form" );

    var select = this.Form.find( "select[ name = 'source' ]" );

    this.DOMReferences = 
    {
        // Form elements
        ID: this.Form.find( "input[ name = 'id' ]" ),
        SourceCode: this.Form.find( "input[ name = 'sourceCode' ]" ),
        SourceValue: select ,
        SourceText: function()
        {
            var index = select.find(":selected").val();
            return this.Form.find( "input[ name = 'other" + SourceCode.val() + index + "' ]" );
        }
    };
}