Question

我想知道如何将所选下拉值中的文本以及文本框中的文本附加到单个字符串中。

我需要JQuery中的结果，我找到了这个link，但这不起作用。先感谢您。

这是我的JSFiddle以获取更多信息。

<form action="#" method="post">
    <fieldset>
        <select type="text" id="rules">
            <option value="">- select one -</option>
            <option value="client_id ">Client_ID</option>
            <option value="employee_id ">Employee_ID</option>
            <option value="salary ">Salary</option>
        </select>
        <select type="text" id="options">
            <option value="">- select one -</option>
            <option value="= =">Equals</option>
            <option value="! =">Not Equals</option>
            <option value="<">Less Than</option>
            <option value=">">Greater Than</option>
        </select>
        <input type="text" placeholder="Enter your value here" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" class="inputValues" id="inputValues" value="" />
        <select type="text" id="options">
            <option value="">- select one -</option>
            <option value="|| ">OR</option>
            <option value="&& ">AND</option>
            <option value=") ">END</option>
        </select>
        <input type="button" value="Generate formula" id="generate"/><br>
        <input type="text" class="summary" id="input" value="" />
    </fieldset>
</form>

脚本：

function summarise(container, what, sumClass) {
    var els = container.querySelectorAll(what),
        sumTo = container.querySelector(sumClass),
        vals = [];
    for (var i = 0, len = els.length; i < len; i++) {
        vals.push(els[i].value);
    }
    sumTo.value = vals.join(' ').trim();
}

var fieldsets = document.querySelectorAll('fieldset');

for (var i = 0, len = fieldsets.length; i < len; i++) {
    fieldsets[i].addEventListener('change', function () {
        summarise(this, 'select', '.summary');
    }, false);
}

输出应该是这样的： for“Client_ID（dd）Equals 708 OR Employee_ID Not Equals 1025 END” （client_id ==“708”|| employee_id！=“1025”）

很抱歉所有这些都是第一次在我的问题中不清楚并稍后更新。 http://jsfiddle.net/Dd3ee/类似的工作

Answer 1

我用jQuery改进了你的代码。

function summarise(container, what, sumClass) {
    var $sumTo = $(sumClass),
        $els = $(container).find("input,select").not($sumTo, $("#generate")),
        vals = [];
    $els.each(function() {
        vals.push($(this).val());
    });
    $sumTo.val(vals.join(' ').trim());
}
/*$("#generate").click(function() {

            $('#generate').append($("<option>" + $('#Text1').val() + "</option>"));*/
var fieldsets = document.querySelectorAll('fieldset');

for (var i = 0, len = fieldsets.length; i < len; i++) {
    fieldsets[i].addEventListener('change', function () {
        summarise(this, 'select', '.summary');
    }, false);
}

<form action="#" method="post">
    <fieldset>
        <select type="text" id="rules">
            <option value="">- select one -</option>
            <option value="client_id ">Client_ID</option>
            <option value="employee_id ">Employee_ID</option>
            <option value="salary ">Salary</option>
        </select>
        <select type="text" id="options">
            <option value="">- select one -</option>
            <option value="= =">Equals</option>
            <option value="! =">Not Equals</option>
            <option value="<">Less Than</option>
            <option value=">">Greater Than</option>
        </select>
        <input type="text" placeholder="Enter your value here" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" class="inputValues" id="inputValues" value="" />
        <select type="text" id="options">
            <option value="">- select one -</option>
            <option value="|| ">OR</option>
            <option value="&& ">AND</option>
            <option value=") ">END</option>
        </select>
        <input type="submit"  value="Generate formula" id="generate"/><br>
        <input type="text" class="summary" id="input" value="" />
    </fieldset>
</form>

编辑反之亦然

这是更优化的版本http://jsfiddle.net/6z97d523/13/。我删除了重复的id并添加了类来监视他们的更改。

function summarise($container, sumClass) {
    var $sumTo = $(sumClass),
        $els = $container.find(".watch"),
        vals = [];
    $els.each(function() {
        vals.push($(this).val());
    });
    $sumTo.val(vals.join(' ').trim());
}

var $fieldset = $("fieldset");
$fieldset.on("change", ".watch", function() {
    summarise($fieldset, '.summary');
});

$(".summary").change(function() {
    var vals = $(this).val().split(" ");
    $fieldset.find(".watch").each(function(i) {
        $(this).val(vals[i]);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="#" method="post">
    <fieldset>
        <select type="text" class="watch" id="rules">
            <option value="">- select one -</option>
            <option value="client_id">Client_ID</option>
            <option value="employee_id">Employee_ID</option>
            <option value="salary">Salary</option>
        </select>
        <select type="text" class="watch" id="options">
            <option value="">- select one -</option>
            <option value="==">Equals</option>
            <option value="!=">Not Equals</option>
            <option value="<">Less Than</option>
            <option value=">">Greater Than</option>
        </select>
        <input type="text" class="watch" placeholder="Enter your value here" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" class="inputValues" id="inputValues" value="" />
        <select type="text" class="watch" id="statement">
            <option value="">- select one -</option>
            <option value="||">OR</option>
            <option value="&&">AND</option>
            <option value=")">END</option>
        </select>
        <input type="submit"  value="Generate formula" id="generate"/><br>
        <input type="text" class="summary" id="input" value="" />
    </fieldset>
</form>

Answer 2

这会有所帮助，

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#generate").click(function(){
            var final_string = $("#rules").val() + ' ' + $("#options1").val() + ' ' +  $("#options2").val() + ' ' +  $("#inputValues").val();
            $("#input").val(final_string);
        });
    });
</script>

享受。

Answer 3

根据您的参考，我找到了适合您的解决方案。

不要重复id多个元素。我修改了你的代码

 <select type="text" id="conditinal_options">
    <option value="">- select one -</option>
    <option value="==">Equals</option>
    <option value="!=">Not Equals</option>
    <option value="<">Less Than</option>
    <option value=">">Greater Than</option>
</select>

$('#rules, #conditinal_options, #inputValues, #options').on('keyup change', function() {

    $('#input').val($('#rules').val() + ' ' +
                             $('#conditinal_options').val() + ' ' +
                             $('#inputValues').val() + ' ' +
                             $('#options').val() );
});

<强> Here is your fiddle

Answer 4

总结函数中 what 参数只有一个问题：

function summarise(container, what, sumClass) {
    var els = container.querySelectorAll(what),
    ...
}

what 设置为＆＃39;选择＆＃39; ：

summarise(this, 'select', '.summary');

因此它无法使用textfield。

您需要做的就是向my-field内的每个input和select元素添加fieldset（或任何）类，然后更新此行（替换<使用＆＃39; .my-field＆＃39; ）选择＆＃39; ：

summarise(this, '.my-field', '.summary');

请参阅DEMO

Answer 5

http://jsfiddle.net/6z97d523/10/，反对流，因为你的原始帖子是普通的JS。而且我不会在jQuery中重写整个内容。除了jQuery在这个场合穿得太过分了。

我添加了一种更加坚定的方式将事件处理程序附加到选择和输入。

var fieldset = document.querySelector('fieldset');
Array.prototype.map.call(fieldset.querySelectorAll("#inputValues, select"), function(element){
    element.addEventListener("change", function(){
        summarise(fieldset, "select, #inputValues", ".summary");
    }, false);
});

这有利于您可以使用逗号分隔querySelectorAll来选择selectors的多个元素。更改事件将添加到所有选择和ID为inputValues的输入。当我们将查询发送到summarise函数时，我们会重用这个简单的事实。

在本文中，您可以找到有关添加事件处理程序的方法的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 6

我们可以利用一些jQuery和Javascript函数来执行此操作，只需很少的代码：

function summarize(form) {
    var results = "";
    $(form).find(":input[type='text']").map(function(idx, el) {
        if(el.className !== 'summary') {
            results += el.value;
        }
    });
    return results.trim();
}

$('#myForm :input').change(function(e) {
    $('input.summary').val(summarize($('#myForm')));
});

和HTML一起使用它：

<form id="myForm" action="#" method="post">
    <fieldset>
        <select type="text" id="rules">
            <option value="">- select one -</option>
            <option value="client_id ">Client_ID</option>
            <option value="employee_id ">Employee_ID</option>
            <option value="salary ">Salary</option>
        </select>
        <select type="text" id="options">
            <option value="">- select one -</option>
            <option value="= =">Equals</option>
            <option value="! =">Not Equals</option>
            <option value="<">Less Than</option>
            <option value=">">Greater Than</option>
        </select>
        <input type="text" placeholder="Enter your value here" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" class="inputValues" id="inputValues" value="" />
        <select type="text" id="options">
            <option value="">- select one -</option>
            <option value="|| ">OR</option>
            <option value="&& ">AND</option>
            <option value=") ">END</option>
        </select>
        <input type="submit"  value="Generate formula" id="generate"/><br>
        <input type="text" class="summary" id="input" value="" />
    </fieldset>
</form>

JSFiddle：http://jsfiddle.net/6z97d523/12/

如何使用JQuery追加文本框值和下拉值，反之亦然

6 个答案: