[JQUERY] jQuery를 사용하여 <선택>에 옵션을 추가?
JQUERYjQuery를 사용하여 <선택>에 옵션을 추가?
해결법
-
1.이것은 IE8에서 작동하지 않았다 (아직 FF에서했던) :
이것은 IE8에서 작동하지 않았다 (아직 FF에서했던) :
$("#selectList").append(new Option("option text", "value"));
이 작업을 DID :
var o = new Option("option text", "value"); /// jquerify the DOM object 'o' so we can use the html method $(o).html("option text"); $("#selectList").append(o);
-
2.개인적으로, 나는 옵션을 추가하기위한 구문을 선호합니다 :
개인적으로, 나는 옵션을 추가하기위한 구문을 선호합니다 :
$('#mySelect').append($('<option>', { value: 1, text: 'My option' }));
당신이 항목 컬렉션에서 옵션을 추가하는 경우, 다음을 수행 할 수 있습니다 :
$.each(items, function (i, item) { $('#mySelect').append($('<option>', { value: item.value, text : item.text })); });
-
3.당신은 또한 자세한 내용은 jQuery를의 방법 핸들 옵션에 방문 할 수 있습니다, 다음 구문을 사용하여 옵션을 추가 할 수 있습니다.
당신은 또한 자세한 내용은 jQuery를의 방법 핸들 옵션에 방문 할 수 있습니다, 다음 구문을 사용하여 옵션을 추가 할 수 있습니다.
-
4.옵션 이름이나 값이 동적 인 경우는 특수 문자를 이스케이프에 대해 걱정할 필요가 싶지 않을 것이다; 이 당신은 간단한 DOM 방법을 선호 할 수 :
옵션 이름이나 값이 동적 인 경우는 특수 문자를 이스케이프에 대해 걱정할 필요가 싶지 않을 것이다; 이 당신은 간단한 DOM 방법을 선호 할 수 :
var s= document.getElementById('mySelect'); s.options[s.options.length]= new Option('My option', '1');
-
5.당신은 this- 시도 할 수 있습니다
당신은 this- 시도 할 수 있습니다
$('#selectID').append($('<option>', { value: value_variable, text : text_variable }));
this-처럼
대 (I = 0; I <10; I ++) { $ ( '#의 mySelect'). APPEND ($ ( '<옵션>', { 값 : I, 텍스트 : "옵션"내가 + })); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> script>
또는 this- 시도
$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );
this-처럼
대 (I = 0; I <10; I ++) { $ ( '#의 mySelect')를 APPEND ( '<옵션 값 = "'+ I + ''> '+'옵션 '+ I +' 옵션>. '); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> script>
-
6.이것은 매우 간단하다 :
이것은 매우 간단하다 :
$('#select_id').append('<option value="five" selected="selected">Five</option>');
또는
$('#select_id').append($('<option>', { value: 1, text: 'One' }));
-
7.그것은 잘 작동합니다.
그것은 잘 작동합니다.
하나 개 이상의 옵션 요소를 추가하는 경우에, 나는 각 요소에 _가 수행 반대로 한 번 APPEND를 수행 권하고 싶습니다.
-
8.$을하고 어떤 이유 ( "#의 myselect") APPEND (새 옵션 ( "텍스트", "텍스트")).; IE7 +에서 나를 위해 작동하지 않습니다
$을하고 어떤 이유 ( "#의 myselect") APPEND (새 옵션 ( "텍스트", "텍스트")).; IE7 +에서 나를 위해 작동하지 않습니다
. 나는 $ ( "#의 myselect") HTML ( "<옵션 값 = '텍스트'> 텍스트 옵션>")를 사용했다;
-
9.당신이 많은 옵션을 추가하는 경우 도움이 성능에 당신은 더욱 더, 한 번만 DOM을 변경하려고합니다.
당신이 많은 옵션을 추가하는 경우 도움이 성능에 당신은 더욱 더, 한 번만 DOM을 변경하려고합니다.
var html = ''; for (var i = 0, len = data.length; i < len; ++i) { html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>'); } $('#select').append(html);
-
10.
$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');
-
11.나는 비 JQuery와 접근 방식을 사용하려면 :
나는 비 JQuery와 접근 방식을 사용하려면 :
mySelect.add(new Option('My option', 1));
-
12.예를 들어 아래 그림과 같이 드롭 다운에 동적으로 옵션을 추가 할 수 있습니다. 여기서이 예에서는 어레이 데이터를 취하여 출력 화면에 도시 한 바와 같이 드롭 배열로 그 값을 바인더 제본 한
예를 들어 아래 그림과 같이 드롭 다운에 동적으로 옵션을 추가 할 수 있습니다. 여기서이 예에서는 어레이 데이터를 취하여 출력 화면에 도시 한 바와 같이 드롭 배열로 그 값을 바인더 제본 한
산출:
VAR resultData = [ "뭄바이", "델리", "첸나이", "고아"] $ (문서) .ready (함수 () { VAR myselect = $ ( '<선택>'); {) .each (resultData, 기능 (인덱스, 키를 $ myselect.append ($ ( '<옵션> 옵션>') 발 (키) .html 중에서 (키).); }); . $ ( '#의 selectCity') APPEND (myselect.html ()); }); <스크립트 SRC = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> script>
-
13.어떤 질문에 대해 언급하지만 유용한 해당 옵션도 선택해야 할 경우와하지, 당신은 추가 할 수 있습니다 :
어떤 질문에 대해 언급하지만 유용한 해당 옵션도 선택해야 할 경우와하지, 당신은 추가 할 수 있습니다 :
var o = new Option("option text", "value"); o.selected=true; $("#mySelect").append(o);
-
14.
var select = $('#myselect'); var newOptions = { 'red' : 'Red', 'blue' : 'Blue', 'green' : 'Green', 'yellow' : 'Yellow' }; $('option', select).remove(); $.each(newOptions, function(text, key) { var option = new Option(key, text); select.append($(option)); });
-
15.두 가지 방법이 있습니다. 당신은이 두 가지 중 하나를 사용할 수 있습니다.
두 가지 방법이 있습니다. 당신은이 두 가지 중 하나를 사용할 수 있습니다.
먼저:
$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');
둘째:
$.each(dataCollecton, function(val, text) { options.append($('<option></option>').val(text.route).html(text.route)); });
-
16.당신은 선택의 특정 지수에 새로운 옵션을 삽입하려면 :
당신은 선택의 특정 지수에 새로운 옵션을 삽입하려면 :
$("#my_select option").eq(2).before($('<option>', { value: 'New Item', text: 'New Item' }));
이 선택에서 3 번째 항목으로 "새 항목"을 삽입합니다.
-
17.당신은 추가 및 텍스트 값 속성을 설정할 수 있습니다 :
당신은 추가 및 텍스트 값 속성을 설정할 수 있습니다 :
$("#id").append($('<option></option>').attr("value", '').text('')); $("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));
-
18.이 옵션을 사용 JQuery와 유효성 검사를 추가 할 때 우리는 어떤 문제를 발견했다. 당신은 선택 여러 목록에 하나 개의 항목을 클릭해야합니다. 당신은 핸들에이 코드를 추가합니다 :
이 옵션을 사용 JQuery와 유효성 검사를 추가 할 때 우리는 어떤 문제를 발견했다. 당신은 선택 여러 목록에 하나 개의 항목을 클릭해야합니다. 당신은 핸들에이 코드를 추가합니다 :
$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>"); $("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected $('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected
-
19.
var numbers = [1, 2, 3, 4, 5]; var option = ''; for (var i=0;i<numbers.length;i++){ option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>'; } $('#items').append(option);
-
20.u는 내부 OPTGROUP이 선택하면, u는 DOM에 오류가 발생했습니다.
u는 내부 OPTGROUP이 선택하면, u는 DOM에 오류가 발생했습니다.
내가 가장 좋은 방법을 생각한다 :
$("#select option:last").after($('<option value="1">my option</option>'));
-
21.이 최적의 성능을 위해 그냥 빨리 점이다
이 최적의 성능을 위해 그냥 빨리 점이다
당신이 많은 옵션을 다루고 항상 때, 큰 문자열을 구축하고 최적의 성능을 위해 '선택'에 추가
f.g.
$이었다 mySelect = $ ( '#의 mySelect'); VAR STR = '';
$.each(items, function (i, item) { // IMPORTANT: no selectors inside the loop (for the best performance) str += "<option value='" + item.value + "'> " + item.text + "</option>"; }); // you built a big string $mySelect.html(str); // <-- here you add the big string with a lot of options into the selector. $mySelect.multiSelect('refresh');
var str = ""; for(var i; i = 0; i < arr.length; i++){ str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>"; } $mySelect.html(str); $mySelect.multiSelect('refresh');
-
22.
$(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(option); });
당신이 그들을 호출 할 수 있도록 이름과 ID는 ... 개체 속성의 이름처럼 당신이 무엇을 ... 그리고 당신은 배열이 있다면 ... 당신은 루프와 빌드 정의 함수에 원하는 ... 그리고 그냥 그 함수를 호출 당연히 준비 ... 건배를 문서화
-
23.항목의 컬렉션을 추가하기위한 dule의 답변에 따라, ...에 대한 것 또한 작업 불가사의의 하나 - 라이너 :
항목의 컬렉션을 추가하기위한 dule의 답변에 따라, ...에 대한 것 또한 작업 불가사의의 하나 - 라이너 :
수 있도록 도시 = { '뉴욕' '뉴욕', 'LD': '런던', 'DB': '두바이', 'PK': '베이징', 'TK': '도쿄', '차': ' 뉴 델리'}; 대한 (도시 다하자) {$ ( '#의 selectCity')에 추가합니다. ($ ( '<옵션>', {값 : C, 텍스트 : 도시 [C]}))} <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"> script>
개체 값과 인덱스 모두 옵션에 할당됩니다. 이 솔루션은 심지어 이전 jQuery를 (V1.4)에서 작동합니다!
-
24.U 옵션에 추가 할 코드 아래에 시도 할 수 있습니다
U 옵션에 추가 할 코드 아래에 시도 할 수 있습니다
<select id="mySelect"></select> <script> $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption")); </script>
-
25.
$('#select_id').append($('<option>',{ value: v, text: t }));
-
26.이것은 각각의 select 태그를 추가하는 버튼으로, 나는 그것을 한 방법입니다.
이것은 각각의 select 태그를 추가하는 버튼으로, 나는 그것을 한 방법입니다.
$(document).on("click","#button",function() { $('#id_table_AddTransactions').append('<option></option>') }
-
27.당신은 ES6에서이 작업을 수행 할 수 있습니다 :
당신은 ES6에서이 작업을 수행 할 수 있습니다 :
$.each(json, (i, val) => { $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`); });
-
28.누군가가 여기 오면 데이터 속성 옵션을 추가하는 방법을 찾고
누군가가 여기 오면 데이터 속성 옵션을 추가하는 방법을 찾고
ATTR 사용
var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);
데이터를 사용하여 - 버전 1.2.3을 추가
var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);
-
29.시험
시험
mySelect.innerHTML+= '<option value=1>My option</option>';
btn.onclick = _ => mySelect.innerHTML + =`<옵션 선택> $ {+ 새 Date} 옵션>` <버튼 ID = "BTN"> 옵션 추가 버튼>
-
30.
$.each(result, function (k,v) { **if(k == selectedMonthNumber) var selectedMonth = 'selected'; else var selectedMonth = '';** $("#periodMonth").append($('<option>', { value: k, text: v, **selected: selectedMonth** })); })
from https://stackoverflow.com/questions/740195/adding-options-to-a-select-using-jquery by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] jQuery를에 CSS 클래스 변경에 발사 이벤트 (0) | 2020.09.27 |
---|---|
[JQUERY] jQuery를에 입력 변화를 감지? (0) | 2020.09.27 |
[JQUERY] 어떻게 다른 요소로 요소를 이동하려면? (0) | 2020.09.27 |
[JQUERY] /// 파일 : XMLHttpRequest를 원점 널 (null)이 파일에 대한 액세스 제어 - 허용 - 원산지를 사용할 수 없습니다 /// (서버를 사용) (0) | 2020.09.27 |
[JQUERY] 어떻게 JS 또는 jQuery로 아약스 요청에 사용자 지정 HTTP 헤더를 추가 할 수 있습니까? (0) | 2020.09.27 |