Question

我选择了这样的列表：

$.fn.optionTest = function(opts) {
    var option = $.extend({}, $.fn.optionTest.defaults, opts);
    $(this).change(function() {
        option.holderObject = $(this);
        if (option.clearOnChange) {
            $(option.actionId).empty();
        }
        var val = $(this).val();
        if ($.fn.optionTest.isArray(val)) {
            $.fn.optionTest.parseArray(val, option);
        } else {
            var label = $(this).children("option:selected").eq(0).text();
            $.fn.optionTest.parseContent(val, option, label);
        }
        $('.' + option.removeLinkOptions.class).click(function(event) {
            $.fn.optionTest.removeRow(this, option);
            event.preventDefault();
        });

        $("[type=date]").datepicker({
            monthNamesShort: $.datepicker.regional["en"].monthNames,
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd',
			yearRange: "-116:+10",
        });
        return this;
    });
};
$.fn.optionTest.isArray = function(val) {
    return Object.prototype.toString.call(val) === '[object Array]';
};
$.fn.optionTest.defaults = {
    clearOnChange: false,
    actionId: '#action',
    indexOptions: {
        class: 'field-style field-split25 align-left'
    },
    rowOptions: {        
        class: 'certificates',
		type: 'text',
        name: 'CertificateType[]',
        tag: 'ul'
    },
    CertNoOptions: {
        
        name: 'CertNo[]',
        type: 'text',
        placeholder: 'Cert No.',
        size: 20,
        class: 'field-style field-split25 align-left'
    },
    PlaceofIssueOptions: {        
        name: 'PlaceofIssueCert[]',
        type: 'text',
        placeholder: 'Place of Issue',
        size: 20,
        class: 'field-style field-split25 align-left'
    },
    fromOptions: {        
        name: 'FromCert[]',
        type: 'date',
        placeholder: 'Date of Issue',
        size: 20,
        class: 'field-style field-split25 align-left'
    },
    toOptions: {        
        name: 'ToCert[]',
        type: 'date',
        placeholder: 'Date of Expire',
        size: 20,
        class: 'field-style field-split25 align-left'
    },
    labelOptions: {
        class: 'field-style field-split25 align-left',
		type: 'text'
    },
    removeLinkOptions: {
        class: 'removeRow',
        href: 'javascript:;'
    }
};
$.fn.optionTest.parseArray = function(vals, options) {
    var selectedOptions = options.holderObject.children("option:selected");
    console.log(selectedOptions.eq(0).html());
    $.each(vals, function(key, val) {
        $.fn.optionTest.parseContent(val, options, selectedOptions.eq(key).text());
    });
};
$.fn.optionTest.removeRow = function(elem, options) {
    var row = $(elem).closest(".certificates");
    row.remove();
    $.fn.optionTest.updateRowIndex(options);
};

$.fn.optionTest.updateRowIndex = function(options) {
    $("." + options.rowOptions.class).each(function(key, value) {
        var index = key + 1;
        $(value).attr('rowdataid', index);
        $(value).children("." + options.indexOptions.class).html(index);
    });
};

$.fn.optionTest.createColumn = function(content) {
    var li = $('<li>');
    return li.append(content);
}
$.fn.optionTest.parseContent = function(val, options, label) {

    var index = $('.' + options.rowOptions.class).length + 1;


    var rowData = $.extend({}, options.rowOptions);
    var indexData = $.extend({}, options.indexOptions);

    rowData.rowDataId = index;


    var CertNoData = $.extend({}, options.CertNoOptions);
    CertNoData.name = CertNoData.name;

    var PlaceofIssueData = $.extend({}, options.PlaceofIssueOptions);
    PlaceofIssueData.name = PlaceofIssueData.name;

    var DateofIssueData = $.extend({}, options.DateofIssueOptions);
    DateofIssueData.name = DateofIssueData.name;

    var DateofExpireData = $.extend({}, options.DateofExpireOptions);
    DateofExpireData.name = DateofExpireData.name;

    var fromData = $.extend({}, options.fromOptions);
    fromData.name = fromData.name;

    var toData = $.extend({}, options.toOptions);
    toData.name = toData.name;

    var start_by = "<li><ul class='column'><li>";
    var end_by = "</li></ul></li>";

    var labelData = $.extend({}, options.labelOptions);

    if ($('#' + rowData.id).length == 0) {
        var tag = "<" + rowData.tag + ">";
        delete rowData['tag'];
        var row = $(tag, rowData);
        var id = $('<li>', indexData).html(index);
		
			  //var label = $('<li>', labelData).html(label);
		
        var label = $.fn.optionTest.createColumn($("<input>", labelData));
        label = $(start_by + $(label).html() + end_by);
		
        var CertNo = $.fn.optionTest.createColumn($("<input>", CertNoData));
        CertNo = $(start_by + $(CertNo).html() + end_by);

        var PlaceofIssue = $.fn.optionTest.createColumn($("<input>", PlaceofIssueData));
        PlaceofIssue = $(start_by + $(PlaceofIssue).html() + end_by);

        var DateofIssue = $.fn.optionTest.createColumn($("<input>", DateofIssueData));
        DateofIssue = $(start_by + $(DateofIssue).html() + end_by);

        var DateofExpire = $.fn.optionTest.createColumn($("<input>", DateofExpireData));
        DateofExpire = $(start_by + $(DateofExpire).html() + end_by);

        var from = $.fn.optionTest.createColumn($("<input>", fromData));
        from = $(start_by + $(from).html() + end_by);

        var to = $.fn.optionTest.createColumn($("<input>", toData));
        to = $(start_by + $(to).html() + end_by);

        var removeRow = $.fn.optionTest.createColumn($("<button>", options.removeLinkOptions).text("X"));
        removeRow = $($(removeRow).html());
       // row.append(label).append(CertNo).append(PlaceofIssue).append(from).append(to).append(removeRow);
		row.append('<input type="hidden" name="RowCertificateType[]" value="' + val + '" />').append(label).append(CertNo).append(PlaceofIssue).append(from).append(to).append(removeRow);

        $(options.actionId).append(row);
    }
};
$(document).ready(function() {
    $('#options').optionTest({
        actionId: '.action2',
        clearOnChange: false
    });
});

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>    
  
  <fieldset class="fieldset-borders">
        <legend>6. Certificates</legend>
        <ul class="header">	
          <li>
            <select id='options' name="CertificateType[]" class="field-style div-format align-left">
    			<option selected disabled value="0">Select certificates</option>
    			<option value="1">Foo</option>
    			<option value="2">Bar</option>
    			<option value="3">OTHER</option>
            </select>  
          </li>
        </ul>
        <div class="action2" ></div>	         
    </fieldset>

从列表中选择任何选项后看到它添加了一些字段。我需要添加带有从选项中选择的值的文本字段标签。

如例子中我有3个选项：

Foo
Bar
OTHER

如果我选择Foo它应该添加以下字段：

Foo [    ] [    ] [    ] [    ]

如果我选择Bar它应该添加以下字段：

Bar [    ] [    ] [    ] [    ]

如果我选择OTHER它应该只生成没有值的空白字段：

[    ] [    ] [    ] [    ] [    ]

现在为所有选定的选项添加所有空白字段。

如果我使用：

var label = $('<li>', labelData).html(label);

而不是：

var label = $.fn.optionTest.createColumn($("<input>", labelData));
label = $(start_by + $(label).html() + end_by);

添加带有值的标签字段，但不可编辑，它不是文本字段，添加OTHER后无法更改。

您是否有想法如何使用If实现正确的语法？类似的东西：

If (option selected = 'OTHER') {

   var label = $.fn.optionTest.createColumn($("<input>", labelData));
   label = $(start_by + $(label).html() + end_by);

}
else {
   var label = $('<li>', labelData).html(label);
}

Answer 1

我不能确定我理解你的问题，但我想你想要的是所选标签在第一个输入字段中显示为值，除非所选标签是“OTHER” ，在这种情况下，该字段应该没有值属性。

如果这是正确的，我们可以通过扩展labelData对象来实现这一目的：

var labelData = $.extend({}, options.labelOptions, {
    value: ((label === 'OTHER') ? '' : label)
});

如何通过Javascript

1 个答案: