선택 상자의 모든 옵션을 제거한 다음 하나의 옵션을 추가하고 jQuery를 사용하여 선택하려면 어떻게 해야 합니까?
core jQuery를 사용하여 선택 상자의 모든 옵션을 제거한 다음 하나의 옵션을 추가하여 선택하려면 어떻게 해야 합니까?
제가 선택한 상자는 다음과 같습니다.
<Select id="mySelect" size="9"> </Select>
편집: 다음 코드는 체인에 도움이 되었습니다.단, (Internet Explorer의 경우).val('whatever')추가된 옵션을 선택하지 않았습니다.(양쪽에서 같은 '값'을 사용했습니다)..append그리고..val.)
$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');
편집: 이 코드를 모방하기 위해 페이지/양식이 리셋될 때마다 다음 코드를 사용합니다.이 선택 상자에는 일련의 옵션버튼이 표시됩니다. .focus()더 가까웠는데 옵션이 선택되지 않은 것 같습니다..selected= "true"기존 코드에는 문제가 없습니다.jQuery를 배우고 있을 뿐입니다.
var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";
편집: 선택된 답변은 제가 필요로 하는 것에 가까웠습니다.이 방법은 효과가 있었습니다.
$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;
하지만 두 답변 모두 최종 해결책으로 이끌었습니다.
$('#mySelect')
.find('option')
.remove()
.end()
.append('<option value="whatever">text</option>')
.val('whatever')
;
$('#mySelect')
.empty()
.append('<option selected="selected" value="whatever">text</option>')
;
그냥 평범한 Javascript를 사용하지 그래요?
document.getElementById("selectID").options.length = 0;
첫 번째 옵션을 제외한 모든 옵션을 선택 항목에서 제거하는 것이 목표인 경우(일반적으로 '항목 선택' 옵션) 다음을 사용할 수 있습니다.
$('#mySelect').find('option:not(:first)').remove();
IE7(IE6에서는 정상적으로 동작)에서 위의 jQuery 메서드를 사용하면 DOM 내의 선택 항목이 지워지지만 화면에서는 지워지지 않는 버그가 있었습니다.IE Developer Toolbar를 사용하여 선택 항목이 지워지고 새 항목이 있는 것을 확인할 수 있었습니다.그러나 선택 항목에는 선택할 수 없는 경우에도 시각적으로 오래된 항목이 표시됩니다.
수정은 jQuery가 아닌 표준 DOM 메서드/프로퍼티(포스터 원본과 동일)를 사용하여 클리어하는 것이었습니다.아직도 jQuery를 사용하여 옵션을 추가합니다.
$('#mySelect')[0].options.length = 0;
기본적으로 선택되므로 "하나 추가 후 선택"이 정확히 무엇을 의미하는지 알 수 없습니다.단, 한 개 이상 더하면 더 말이 됩니다.예를 들어 다음과 같습니다.
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
"EDIT"에 대한 응답: "This select box is income of adio buttons?" (이 선택박스는 라디오 버튼 세트로 채워져 있습니다)의 의미를 명확히 할 수 있습니까?a<select>요소는 포함할 수 없습니다(포함).<input type="radio">요소들.
$('#mySelect')
.empty()
.append('<option value="whatever">text</option>')
.find('option:first')
.attr("selected","selected")
;
$("#control").html("<option selected=\"selected\">The Option...</option>");
선택 태그에서 모든 옵션을 제거하려면 한 줄만 사용하고 옵션을 추가한 후 두 번째 줄을 만들어 옵션을 추가합니다.
$('.ddlsl').empty();
$('.ddlsl').append(new Option('Select all', 'all'));
한 가지 더 지름길이지만 시도하지 않았다.
$('.ddlsl').empty().append(new Option('Select all', 'all'));
답변을 받은 덕분에 다음과 같은 내 요구에 맞는 것을 만들 수 있었습니다.내 질문은 좀 애매했다.팔로우 해줘서 고마워요.나의 마지막 문제는 내가 선택하기를 원하는 옵션에 "선택"을 포함시킴으로써 해결되었다.
$(function() {
$('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
$("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
// Bind click event to each radio button.
$("input[name='myRadio']").bind("click",
function() {
switch(this.value) {
case "1":
$('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
break ;
case "2":
$('#mySelect').find('option').remove() ;
var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
var options = '' ;
for (var i = 0; i < items.length; i++) {
if (i==0) {
options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
}
else {
options += '<option value="' + items[i] + '">' + items[i] + '</option>';
}
}
$('#mySelect').html(options); // Populate select box with array
break ;
} // Switch end
} // Bind function end
); // bind end
}); // Event listener end<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input name="myRadio" type="radio" value="1" /></label>
<label>Two<input name="myRadio" type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>인터넷에서 다음과 같은 것을 발견했습니다.이 있기 에, 이것은 더 ..empty() ★★★★★★★★★★★★★★★★★」.find().remove()j에서쿼리(Query)
var ClearOptionsFast = function(id) {
var selectObj = document.getElementById(id);
var selectParentNode = selectObj.parentNode;
var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
selectParentNode.replaceChild(newSelectObj, selectObj);
return newSelectObj;
}
자세한 것은 이쪽.
html을 새로운 데이터로 변경하는 것은 어떨까요?
$('#mySelect').html('<option value="whatever">text</option>');
또 다른 예는 다음과 같습니다.
$('#mySelect').html('
<option value="1" selected>text1</option>
<option value="2">text2</option>
<option value="3" disabled>text3</option>
');
다른 방법:
$('#select').empty().append($('<option>').text('---------').attr('value',''));
이 링크 아래에는 베스트 프랙티스가 있습니다.https://api.jquery.com/select/
첫 번째 옵션을 제외하고 먼저 모든 기존 옵션을 지웁니다(--Select--).
루프를 사용하여 새 옵션 값 하나씩 추가
$('#ddlCustomer').find('option:not(:first)').remove(); for (var i = 0; i < oResult.length; i++) { $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID)); }
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');
옵션 검색 기준이 언급되지 않았기 때문에 코드의 첫 번째 줄은 선택 상자의 모든 옵션을 삭제합니다.
코드 두 번째 줄에는 지정된 값("testValue")과 텍스트("TestText")의 옵션이 추가됩니다.
Mauretto의 답변에 기초하여, 이것은 조금 더 쉽게 읽고 이해할 수 있습니다.
$('#mySelect').find('option').not(':first').remove();
특정 값을 가진 옵션을 제외한 모든 옵션을 삭제하려면 다음을 사용합니다.
$('#mySelect').find('option').not('[value=123]').remove();
추가할 옵션이 이미 있다면 더 좋을 것입니다.
jquery prop()을 사용하여 선택한 옵션을 지웁니다.
$('#mySelect option:selected').prop('selected', false);
기존 mySelect를 새로운 mySelect로 바꿉니다.
$('#mySelect').replaceWith('<Select id="mySelect" size="9">
<option value="whatever" selected="selected" >text</option>
</Select>');
html을 바꾸면 간단하게 할 수 있습니다.
$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
Select2 - Clearing Selections에서 이 코드를 확인했습니다.
$('#mySelect').val(null).trigger('change');
이 코드는 Select2가 없어도 jQuery와 함께 사용할 수 있습니다.
클리너 주세요 좋아요
let data= []
let inp = $('#mySelect')
inp.empty()
data.forEach(el=> inp.append( new Option(el.Nombre, el.Id) ))
- 개체에 추가할 옵션 값 저장
- 선택 태그의 기존 옵션 지우기
- 목록 개체를 반복하고 원하는 선택 태그에 내용을 추가합니다.
var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};
$('#selectID').empty();
$.each(listToAppend, function(val, text) {
$('#selectID').append( new Option(text,val) );
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>나는 바닐라 자바스크립트를 사용했다.
let select = document.getElementById("mySelect");
select.innerHTML = "";
잘 되길 바란다
$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
var d = data[i];
var option = $('<option/>').val(d.id).text(d.title);
select.append(option);
}
select.val('');
해라
mySelect.innerHTML = `<option selected value="whatever">text</option>`
function setOne() {
console.log({mySelect});
mySelect.innerHTML = `<option selected value="whatever">text</option>`;
}<button onclick="setOne()" >set one</button>
<Select id="mySelect" size="9">
<option value="1">old1</option>
<option value="2">old2</option>
<option value="3">old3</option>
</Select>가장 짧은 답변:
$('#mySelect option').remove().append('<option selected value="whatever">text</option>');
해라
$('#mySelect')
.html('<option value="whatever">text</option>')
.find('option:first')
.attr("selected","selected");
또는
$('#mySelect').html('<option value="4">Value 4</option>
<option value="5">Value 5</option>
<option value="6">Value 6</option>
<option value="7">Value 7</option>
<option value="8">Value 8</option>')
.find('option:first')
.prop("selected",true);
언급URL : https://stackoverflow.com/questions/47824/how-do-you-remove-all-the-options-of-a-select-box-and-then-add-one-option-and-se
'source' 카테고리의 다른 글
| 403 오류 페이지를 에뮬레이트합니다. (0) | 2022.11.08 |
|---|---|
| PHP - 어레이 값의 키 이름 가져오기 (0) | 2022.11.08 |
| 데이터베이스 필드를 1씩 늘립니다. (0) | 2022.11.08 |
| php 세션 ID는 얼마나 고유합니까? (0) | 2022.11.08 |
| 주간 및 야간 근무자 수에서 IN 및 OUT을 필터링하는 방법은 무엇입니까? (0) | 2022.11.08 |