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

-1

我想知道如何將所選下拉值中的文本以及文本框中的文本追加到單個字符串中。如何追加文本框值與下拉值，反之亦然使用JQuery

我需要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); 
}

輸出應該是這樣的：對於「CLIENT_ID（DD）等於708 OR的Employee_ID不等同1025 END」（CLIENT_ID == 「708」 || employee_id！=「1025」）

對不起，我第一次不清楚問題並稍後更新。 http://jsfiddle.net/Dd3ee/類似的工作

來源

2015-03-02 raja777m

'summarize（）'函數調用在哪裏？ – Ranjith 2015-03-02 14:38:35

生成的公式應該是什麼樣子？ – lshettyl 2015-03-02 14:44:57

@Ranjith：您的意思是類似的功能： bind（'keypress blur'，function（）？我對JQuery相當陌生，所以我仍然在學習。 [總結（）]（https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=summarise（）％20jquery） – raja777m 2015-03-02 14:47:44

我用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>

來源

2015-03-02 14:47:04

非常感謝，我只是在尋找這個。我會進一步更新以使用按鈕文字。 – raja777m 2015-03-02 14:48:52

嗨，有什麼辦法可以做到反之亦然，如果我編輯文本，它也應該反映在下拉列表中。謝謝 – raja777m 2015-03-02 14:57:40

您可以從選項值（「==」而不是「= =」）中刪除空格。然後，您可以獲取已提交的字段的值。用空格分隔它（var values = $（「＃input」）.val（）.split（「」）），你會得到一個輸入值的數組。然後，您只需將這些值設置爲您的檔案。示例：$（「＃rules」）。val（values [0]） – 2015-03-02 15:03:34

這將幫助，

<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>

享受。

來源

2015-03-02 14:50:13

謝謝你，Umesh，我和Ranjith一起使用你的代碼，它爲我工作。 – raja777m 2015-03-02 17:24:35

根據你的參考，我找到你的解決方案。

不要重複多個元素的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

來源

2015-03-02 14:52:31 Ranjith

以及umesh的答案，它對我來說工作得很好。 +1用於清潔ID重複提示。 – raja777m 2015-03-02 17:16:36

嗨Ranjith，我想在JQuery版本中反過來。 Tim在js中給了我：http://jsfiddle.net/6z97d523/13/ JQuery看起來更清潔，更少loc。 – raja777m 2015-03-03 17:53:45

只是有一個問題what說法在總結功能：

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

凡what設置爲'選擇' here：

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

這樣它就不會使用文本字段。

所有你需要做的是添加my-field（或）班每個input和select元素中fieldset，然後更新這條線（含「我場」取代「選擇」）：

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

見DEMO

來源

2015-03-02 14:56:46

-1

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); 
});

這使得的事實，你可以通過用逗號分隔的selectors與querySelectorAll選擇多個元素的優勢。將更改事件添加到所有選擇和輸入編號爲inputValues。當我們將查詢發送到summarise函數時，我們重用這個簡單的事實。

在這篇文章中，你可以找到更多關於用於添加事件處理程序的方法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

來源

2015-03-02 14:58:37 Mouser

這是錯誤的。 OP在jQuery – 2015-03-02 15:11:19

@Stephn_R上尋求解決方案，閱讀答案。 OP發佈了純javascript，並要求我們在jQuery中重寫他的整個代碼，而不是這樣做。這是基於他的代碼。 – Mouser 2015-03-02 15:12:46

對不起在中間的誤解。我編了幾次我的問題，但我從一開始就要求提供JQuery。感謝您的努力@Mouser。 – raja777m 2015-03-02 16:41:49

-1

我們可以利用一對夫婦的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/

來源

2015-03-02 15:09:19

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

回答

相關問題