의 의 의

의 with jQuery? jQuery와 함께?Suppose a list of options is available, how do you update the <select> with new <option>s?옵션 목록을 사용할 수 있다고 가정하면, 어떻게 새로운 <옵션>으로 <선택>을 업데이트합니까?You can remove the existing options by using the empty method, and then add your new options: 빈 방법을 사용하여 기존 옵션을 제거한 다음 새 옵션을 추가할 수 있습니다.var option = $('<option></option>').attr("value", "option value").text("Text");var 옵션 = $('<option></option>) 특성 "값", "옵션 값").text("텍스트"); $("#selectId").empty().append(option);$("#selectId"). 빈().append(옵션); If you have your new options in an object you can: 개체에 새 옵션이 있는 경우 다음을 수행할 수 있습니다.var newOptions = {"Option 1": "value1", varnew옵션 = {"옵션 1": "value1", "Option 2": "value2", "옵션 2": "value2", "Option 3": "value3" "옵션 3": "값 3"}; }; var $el = $("#selectId");var $el = $("#selectId"); $el.empty(); // remove old options $el.empty(); // 이전 옵션 제거$.each(newOptions, function(key,value) { $.각(새 옵션, 함수(키, 값) { $el.append($("<option></option>") $el.($append("<option></option>) .attr("value", value).text(key)).attr("value", value).text(키); ;}); }); Edit: For removing the all the options but the first, you can use the :gt selector, to get all the option elements with index greater than zero and remove them: 편집: 첫 번째 옵션을 제외한 모든 옵션을 제거하려면 :gt 선택기를 사용하여 인덱스가 0보다 큰 모든 옵션 요소를 가져온 다음 제거할 수 있습니다.$('#selectId option:gt(0)').$('#selectId 옵션:gt(0)').remove(); // remove all options, but not the first remove (); // 모든 옵션을 제거합니다. 단, 첫 번째 옵션은 제거하지 않습니다.I threw CMS's excellent answer into a quick jQuery extension: 저는 CMS의 훌륭한 답변을 빠른 jQuery 확장자에 던졌습니다.(function($, window) { (함수, 창) { $.fn.replaceOptions = function(options) { $.fn.replace옵션 = 함수(함수) { var self, $option; varself, $option; this.empty(); 이 .빈 (); self = this; self = 이것; $.each(options, function(index, option) { $.each(테이블, 함수(인덱스, 옵션) { $option = $("<option></option>") $option = $("<option></option>) .attr("value", option.value) .attr("value", 옵션.value) .text(option.text);.text(옵션.text); self.append($option);self.self(선택권 없음); }); }); }; };})(jQuery, window);})(jQuery, 창); It expects an array of objects which contain "text" and "value" keys.텍스트 및 "값" 키를 포함하는 개체의 배열이 필요합니다. So usage is as follows: 사용법은 다음과 같습니다.var options = [ var 옵션 = [ {text: "one", value: 1}, {text: "하나", 값: 1, {text: "two", value: 2} {text: "two", 값: 2}]; ]; $("#foo").replaceOptions(options);$("#foo"). 대체 옵션(옵션); $('#comboBx').append($("<option></option>").attr("value",key).text(value))$('#comboBx').append($("<option>/option>.attr("value", 키).text(값)); ; where comboBx is your combo box id.여기서 comboBx는 콤보 상자 ID입니다. or you can append options as string to the already existing inner또는 이미 존재하는 내부에 문자열로 옵션을 추가할 수 있습니다.HTML and then assign to the select innerHTML을 선택한 다음 내부에 할당합니다.HTML. HTML.Edit 편집If you need to keep the first option and remove all other then you can use 첫 번째 옵션을 유지하고 다른 옵션을 모두 제거해야 하는 경우 다음을 사용할 수 있습니다.var firstOption = $("#cmb1 option:first-child");varfirst 옵션 = $("#cmb1 옵션: 첫째 자식"); $("#cmb1").empty().append(firstOption);$("#cmb1").빈().append(첫 번째 옵션); For some odd reason this part 이상한 이유로 이 부분은$el.empty(); // remove old options $el.empty(); // 이전 옵션 제거 from CMS solution didn't work for me, so instead of that I've simply used this CMS 솔루션은 나에게 효과가 없었기 때문에, 나는 그것 대신에 이것을 단순히 사용했습니다.el.html(' '); 엘.('); And it's works.그리고 효과가 있습니다. So my working code now looks like that: 이제 제 작업 코드는 다음과 같습니다.var newOptions = { varnew 옵션 = { "Option 1":"option-1", "옵션 1": "옵션 1", "Option 2":"option-2" "옵션 2": "옵션 2"}; }; var $el = $('.selectClass');var $el = $(.selectClass'); $el.html(' '); $el.sv ';$.each(newOptions, function(key, value) { $.각(새 옵션, 함수(키, 값) { $el.append($("<option></option>") $el.($append("<option></option>) .attr("value", value).text(key)).attr("value", value).text(키); ;}); });Removing and adding DOM element is slower than modification of existing one.DOM 요소를 제거하고 추가하는 것이 기존 요소를 수정하는 것보다 느립니다. If your option sets have same length, you may do something like this: 옵션 세트의 길이가 같은 경우 다음과 같은 작업을 수행할 수 있습니다.$('#my-select option') $('#my-select 옵션').each(function(index) { .each(함수(인덱스) { $(this).text('someNewText').val('someNewValue');$(this).text('someNewText').val('someNewValue'); }); }); In case your new option set has different length, you may delete/add empty options you really need, using some technique described above.새 옵션 세트의 길이가 다른 경우 위에서 설명한 몇 가지 방법을 사용하여 필요한 빈 옵션을 삭제하거나 추가할 수 있습니다.Does this help?이게 도움이 되나요? $("#SelectName option[value='theValueOfOption']")[0].$("#SelectName 옵션[value='ValueOfOption'])[0].selected = true; 선택됨 = 참;Old school of doing things by hand has always been good for me.손으로 무언가를 하는 오래된 학교는 항상 저에게 좋았습니다. Clean the select and leave the first option: $('#your_select_id').find('option').선택 항목을 지우고 첫 번째 옵션인 $('#your_select_id').find('option')를 그대로 둡니다.remove() 제거하다, 제거하다 .end().append('<option value="0">Selec....end는 <option value="0"> 선택...</option>') </option>) .val('whatever');.valwhatever(''; If your data comes from a Json or whatever (just Concat the data): var JSONObject = JSON.parse(data);데이터가 Json 또는 그 밖의 다른 것(데이터를 Concat)에서 가져온 경우: var JSONObject = JSON.parse(데이터); newOptions새 옵션Select = ''; = ''을 선택합니다; for (var key in JSONObject) { (JSONObject의 var 키) {에 대해 if (JSONObject.hasOwnProperty(key)) { if(JSONObject.hasOwnProperty(키)) { var newOptionsvarnew 옵션Select = newOptions= 새 옵션 선택Select + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>'; + '+<option value="+JSONObject[key]["value"]+'>'+JSONObject[key]["text"]+'/option>'을 선택합니다. } } } } $('#your_select_id').append( newOptions$('#your_select_id'). 추가(새 옵션)Select ); 선택); My Json Objetc: [{"value":1,"text":My Json Objetc: [{"value":1,text":"Text 1"},{"value":2,"text":"텍스트 1",{"값":2,"텍스트":"Text 2"},{"value":3,"text":"텍스트 2",{"값":3,"텍스트":"Text 3"}] "텍스트 3"}] This solution is ideal for working with Ajax, and answers in Json from a database.이 솔루션은 Ajax와 함께 작업하는 데 이상적이며 데이터베이스에서 Json으로 답변합니다.If for example your html code contain this code: 예를 들어 HTML 코드에 다음 코드가 포함되어 있는 경우:<select id="selectId"><option><select id="selectId"><옵션>Test1</option><option>테스트1</option><option>Test2</option></select> 테스트2 </옵션> </선택> In order to change the list of option inside your select, you can use this code bellow.선택 항목 내의 옵션 목록을 변경하려면 아래 코드를 사용하십시오. when your name select named selectId.이름이 selectId를 선택하면 선택합니다. var option = $('<option></option>').attr("value", "option value").text("Text");var 옵션 = $('<option></option>) 특성 "값", "옵션 값").text("텍스트"); $("#selectId").html(option);$("#selectId").html(옵션); in this example above i change the old list of option by only one new option.if we update <select> constantly and we need to save previous value : 위의 이 예에서 나는 이전 옵션 목록을 하나의 새로운 옵션으로만 변경합니다. 만약 우리가 <선택>을 지속적으로 업데이트하고 이전 값을 저장해야 한다면:var newOptions = { varnew 옵션 = { 'Option 1':'value-1', '옵션 1': 'value-1', 'Option 2':'value-2' '옵션 2': 'value-2'}; }; var $el = $('#select');var $el = $('#select'); var prevValue = $el.val(); var prevValue = $el.val();$el.empty(); $el. 비어 있음.$.each(newOptions, function(key, value) { $.각(새 옵션, 함수(키, 값) { $el.append($('<option></option>').attr('value', value).text(key))$el.value('<option></option>attr('value', value.text(키)); ; if (value === prevValue){ if(값 === prevValue){ $el.val(value);$el.val(값); } }}); });$el.trigger('change');$el.trigger "변경"; Reference언급URL : https://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jqueryURL : https://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jquery