optionbox
홈
태그
방명록
developer tip
옵션 추가
optionbox
2020. 9. 30. 10:25
반응형
옵션 추가
jQuery를 사용하십니까?
jQuery를 사용하여 드롭 다운에 옵션을 추가하는 가장 쉬운 방법은 무엇입니까?
작동할까요?
$ ( "# mySelect"). append ( '<option value = 1> 내 옵션 </ option>');
이것은 IE8에서 작동하지 않았습니다 (아직 FF에서는 작동했습니다) : $ ( "# selectList"). append (new Option ( "option text", "value"));
이 DID는 작동합니다. var o = new Option ( "option text", "value");
/// DOM 객체 'o'를 jquerify하여 html 메소드를 사용할 수 있습니다. $ (o) .html ( "option text");
$ ( "# selectList"). append (o);
개인적으로 옵션을 추가하는 데 다음 구문을 선호합니다. $ ( '# mySelect'). append ($ ( '<option>', {value : 1, text : 'My option'}));
항목 모음에서 옵션을 추가하는 경우 다음을 수행 할 수 있습니다. $ .each (items, function (i, item) {$ ( '
#mySelect '). append ($ ('<option> ', {value : item.value, text : item.text}));
});
다음 구문을 사용하여 옵션을 추가 할 수 있으며, 자세한 내용은 jQuery의 방법 핸들 옵션을 참조하십시오.
$ ( '# select'). append ($ ( '<옵션>', {value : 1, text : 'One'}));
$ ( '# select'). append ( '<option value = "1"> 하나 </ option>');
var option = new Option (텍스트, 값);
$ ( '# select'). append ($ (옵션));
옵션 이름이나 값이 동적이면 그 안의 특수 문자 이스케이프에 대해 걱정할 필요가 없습니다.
여기에서는 간단한 DOM 메소드를 선호 할 수 있습니다. var s = document.getElementById ( 'mySelect');
s.options [s.options.length] = new Option ( '내 옵션', '1');
옵션 1- $ ( '# selectID') 시도해 볼 수 있습니다.
append ($ ( '<옵션>', {value : value_variable, text : text_variable}));
다음과 같이-for (i = 0; i <10; i ++) {$ ( '# mySelect'). append ($ ( '<option>', {value : i, text : "Option"+ i}));
} <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </ script> <select id = 'mySelect'> </ select> 옵션 2- 또는 이것을 시도하십시오-$ ( '# selectID'). append ( '<option value = "'+ value_variable + '">'+ text_variable + '</ option>');
이와 같이-for (i = 0; i <10; i ++) {$ ( '# mySelect'). append ( '<option value = "'+ i + '">'+ 'Option'+ i + '</ option> ');
} <script src = "https :
label '] +'</ option> ');
} $ ( '# select'). append (html);
$ ( '# mySelect'). empty (). append ( '<option value = 1> 내 옵션 </ option>'). selectmenu ( 'refresh');
비 jquery 접근 방식을 사용하고 싶습니다 : mySelect.add (new Option ( 'My option', 1));
이것은 매우 간단한 것입니다.
이렇게하면 $ ( '# select_id'). append ( '<option value = "five"selected = "selected"> Five </ option>');
또는 $ ( '# select_id'). append ($ ( '<option>', {value : 1, text : 'One'}));
아래 예와 같이 드롭 다운에 동적으로 옵션을 추가 할 수 있습니다.
이 예에서는 출력 스크린 샷 출력에 표시된대로 배열 데이터를 가져 와서 해당 배열 값을 드롭 다운에 바인딩했습니다.
var resultData = [ "Mumbai", "Delhi", "Chennai", "Goa"] $ (document) .ready (function () {var myselect = $ ( '<select>'); $ .each (resultData, function (index, key) {myselect.append ($ ( '<option> </ option>'). val (key) .html (key));}); $ ( '# selectCity'). append (myselect.html ());});
<script src = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> </ script> <select id = "selectCity"> </ select> 언급되지 않음 대답은 유용하지만 해당 옵션을 선택하려는 경우 다음을 추가 할 수 있습니다. var o = new Option ( "option text", "value");
o.selected = true;
$ ( "# mySelect"). append (o);
var select = $ ( '# myselect');
var newOptions = { 'red': 'Red', 'blue': 'Blue', 'green': 'Green', 'yellow': '노란색'};
$ ( '옵션', 선택) .remove ();
$ .each (newOptions, function (text, key) {var option = new Option (key, text); select.append ($ (option));});
두 가지 방법이 있습니다.
이 두 가지 중 하나를 사용할 수 있습니다.
첫 번째 : $ ( '# waterTransportationFrom'). append ( '<option value = "select"selected = "selected"> 드롭 다운 목록에서 선택 </ option>');
두 번째 : $ .each (dataCollecton, function (val, text) {options.append ($ ( '<option> </ option>'). val (text.route) .html (text.route));});
선택의 특정 색인에 새 옵션을 삽입하려면 다음을 수행하십시오.
$ ( "# my_select option"). eq (2) .before ($ ( '<option>', {value : 'New Item', text : 'New Item'}));
그러면 선택에서 세 번째 항목으로 "새 항목"이 삽입됩니다.
다음과 같은 텍스트로 Value 속성을 추가하고 설정할 수 있습니다. $ ( "# id"). append ($ ( '<option> </ option>'). attr ( "value", '') .text ( '')) ;
$ ( "# id"). append ($ ( '<option> </ option>'). attr ( "value", '4'). text ( 'Financial Institutions'));
옵션을 추가하고 jquery validate를 사용할 때 몇 가지 문제를 발견했습니다.
다중 선택 목록에서 하나의 항목을 클릭해야합니다.
처리 할 다음 코드를 추가합니다. $ ( "# phonelist"). append ( "<option value = '"+'yournewvalue '+ "'>"+ 'yournewvalue'+ "<
루프 내부에 선택기가 없습니다 (최상의 성능을 위해) str + = "<option value = '"+ item.value + "'>"+ item.text + "</ option>";
});
// 큰 문자열을 만들었습니다. $ mySelect.html (str);
// <-여기에서 많은 옵션이있는 큰 문자열을 선택기에 추가합니다.
$ mySelect.multiSelect ( '새로 고침');
더 빠른 var str = "";
for (var i; i = 0; i <arr.length; i ++) {str + = "<option value = '"+ item [i] .value + "'>"+ item [i] .text + "< / 옵션> ";
} $ mySelect.html (str);
$ mySelect.multiSelect ( '새로 고침');
항목 모음 추가에 대한 dule의 답변에 따라 ... in에 대한 한 줄짜리도 놀라운 작업을 수행 할 수 있습니다. let city = { 'ny': 'New York', 'ld': 'London', 'db': '
Dubai ','pk ':'Beijing ','tk ':'Tokyo ','nd ':'New Delhi '};
for (let c in 도시) {$ ( '# selectCity'). append ($ ( '<option>', {value : c, text : 도시 [c]}))} <script src = "https : // ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js "> </ script> <select id ="selectCity "> </ select> 객체 값과 색인 모두 옵션에 할당됩니다.
이 솔루션은 이전 jQuery (v1.4)에서도 작동합니다!
select 안에 optgroup이 있으면 DOM에 오류가 있습니다.
가장 좋은 방법은 다음과 같습니다. $ ( "# select option : last"). after ($ ( '<option value = "1"> my option </ option>'));
아래 코드를 <select id = "mySelect"> </ select> <script> $ ( "# mySelect") 옵션에 추가 할 수 있습니다.
append ($ ( "<옵션> </ option>"). val ( "1"). html ( "여기에 코드 입력 option"));
</ script> $ ( '# select_id'). append ($ ( '<option>', {value : v, text : t}));
이것은 각 선택 태그를 추가하는 버튼으로 내가 한 방식입니다.
$ (document) .on ( "click", "# button", function () {$ ( '# id_table_AddTransactions'). append ( '<option> </ option>')} $ (function () {var option = $ ( "<option> </ option>"); option.text ( "Display text"); option.val ( "1"); $ ( "# Select1"). append (option);}); 어떤 객체에서 데이터를 가져온 다음 해당 객체를 함수로 전달합니다 ... $ (function (product) {var option = $ ( "<option> </ option>"); option.text (product.Name);
option.val (product.Id);
$ ( "# Select1"). append (옵션);
});
Name과 Id는 객체 속성의 이름입니다 ... 그래서 원하는대로 호출 할 수 있습니다 ... 그리고 물론 Array가있는 경우 ... for 루프를 사용하여 사용자 지정 함수를 빌드하려는 경우 ... 다음에서 해당 함수를 호출합니다. 문서 준비 ... 건배 ES6에서이 작업을 수행 할 수 있습니다. $ .each (json, (i, val) => {$ ( '. js-country-of-birth'). append (`<option value = "$ {val.country_code} "> $ {val.country} </ option>`);});
누군가 데이터 속성을 사용하여 옵션을 추가하는 방법을 찾고 있다면 attr var option = $ ( '<option>', {value : 'the_value', text : 'some text'}). attr ( 'family', model 사용 .가족);
데이터 사용-버전 추가 1.2.3 var option = $ ( '<option>', {value : 'the_value', text : '
일부 텍스트 '}). data ('misc ','misc-value);
참고 URL : https://stackoverflow.com/questions/740195/adding-options-to-a-select-using-jquery
반응형
공유하기
게시글 관리
optionbox
'
developer tip
' 카테고리의 다른 글
개수 (*) 대 개수 (1)-SQL Server
(0)
2020.09.30
module.exports 대 Node.js의 내보내기
(0)
2020.09.30
JavaScript에서 배열의 최소 / 최대 요소 찾기
(0)
2020.09.30
Python의 easy_install로 설치된 패키지를 제거하려면 어떻게해야합니까?
(0)
2020.09.30
macOS Mojave 업데이트 후 Git이 작동하지 않음 (xcrun : 오류 : 잘못된 활성 개발자 경로 (/ Library / Developer / CommandLineTools))
(0)
2020.09.30
티스토리툴바