cách kích hoạt hộp văn bản nếu tôi chọn một tùy chọn khác trong hộp thả xuống

giả sử tôi có 3 tùy chọn trong hộp thả xuống cho biết màu đỏ, xanh lam, các loại khác. Nếu người dùng chọn tùy chọn làm người khác thì bên dưới hộp văn bản sẽ hiển thị để ghi lại màu yêu thích của riêng mình. Tôi có thể điền vào hộp thả xuống với màu sắc nhưng không biết cách hiển thị hộp văn bản khi chọn người khác trong hộp thả xuống . Tôi biết rằng bằng cách sử dụng javascript nó có thể làm nhưng tôi khá mới để javascript. ai cũng có thể giúp tôi không?cách kích hoạt hộp văn bản nếu tôi chọn một tùy chọn khác trong hộp thả xuống

Đây là chọn lựa chọn Tôi đang thực hiện ở dạng html tôi

<select name="color"> // color 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 

<input type="text" name="color" id="color" /></td> // this textbox should be hidden //until unless others is selected in the drop down box

Nguồn

2012-03-09 Shashi Roy

Dưới là mã JavaScript cốt lõi bạn cần phải viết:

<html> 
<head> 
<script type="text/javascript"> 
function CheckColors(val){ 
var element=document.getElementById('color'); 
if(val=='pick a color'||val=='others') 
    element.style.display='block'; 
else 
    element.style.display='none'; 
} 

</script> 
</head> 
<body> 
    <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
    </select> 
<input type="text" name="color" id="color" style='display:none;'/> 
</body> 
</html>

Nguồn

2012-03-09 13:38:36

được rồi .. bây giờ tôi có thể hiểu sai trong câu hỏi của tôi. Tôi không muốn xử lý một trường trống. Ở đây trong hộp văn bản trường hợp này chỉ là vô hình. Tôi muốn nó vô hình và hoạt động trong biểu mẫu của tôi chỉ trong trường hợp tôi chọn người khác. Tôi không muốn xử lý một trường trống vì nó sẽ hiển thị lỗi trong khi chèn vale vào cơ sở dữ liệu. –

Xin lỗi để chip trong @Umesh ... Tôi không thể làm điều này để làm việc vì đầu vào văn bản phủ nhận các tùy chọn chọn cho một số lý do. CỨU GIÚP? Ý tôi là, javascript hoạt động và mọi thứ nhưng nó sẽ KHÔNG BẬT các giá trị từ menu thả xuống ... chỉ nhập văn bản – gavin

@gavin Bạn đã bao giờ giải quyết vấn đề nhập văn bản ghi đè lựa chọn vì tôi có cùng vấn đề ? –

Inline:

<select 
onchange="var val = this.options[this.selectedIndex].value; 
this.form.color[1].style.display=(val=='others')?'block':'none'">

tôi đã sử dụng để làm điều này

Trong đầu (cho sau đó chọn một ID):

window.onload=function() { 
    var sel = document.getElementById('color'); 
    sel.onchange=function() { 
    var val = this.options[this.selectedIndex].value; 
    if (val == 'others') { 
     var newOption = prompt('Your own color',''); 
     if (newOption) { 
     this.options[this.options.length-1].text = newOption; 
     this.options[this.options.length-1].value = newOption; 
     this.options[this.options.length] = new Option('other','other'); 
     } 
    } 
    } 
}

Nguồn

2012-03-09 13:30:15 mplungjan

Coded một ví dụ tại http://jsbin.com/orisuv

HTML

<select name="color" onchange='checkvalue(this.value)'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 
<input type="text" name="color" id="color" style='display:none'/>

Javascript

function checkvalue(val) 
{ 
    if(val==="others") 
     document.getElementById('color').style.display='block'; 
    else 
     document.getElementById('color').style.display='none'; 
}

Nguồn

2012-03-09 13:30:55

Đơn giản chỉ cần

<select id = 'color2' 
     name = 'color' 
     onchange = "if ($('#color2').val() == 'others') { 
         $('#color').show(); 
        } else { 
         $('#color').hide(); 
        }"> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 

<input type = 'text' 
     name = 'color' 
     id = 'color' />

chỉnh sửa: yêu cầu JQuery Plugin

Nguồn

2012-03-09 13:32:14 CKKiller

lý do tại sao sử dụng jQuery cho một số công việc javascript tầm thường? –

ngắn hơn và neater, nó chỉ là những gì tôi sử dụng, tôi luôn luôn có jquery đính kèm anyway – CKKiller

Bạn nên đã đề cập rằng trong câu trả lời. OP có thể thử câu trả lời này và cuối cùng nhận được nhiều lỗi: P –

Vì Umesh Patil answer có nhận xét rằng có vấn đề. Tôi cố gắng chỉnh sửa câu trả lời và từ chối. Và đề xuất đăng câu trả lời mới. Mã này nên giải quyết vấn đề mà họ có (Shashi Roy, Gaven, John Higgins).

<html> 
<head> 
<script type="text/javascript"> 
function CheckColors(val){ 
var element=document.getElementById('othercolor'); 
if(val=='others') 
    element.style.display='block'; 
else 
    element.style.display='none'; 
} 

</script> 
</head> 
<body> 
    <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
    </select> 
<input type="text" name="othercolor" id="othercolor" style='display:none;'/> 
</body> 
</html>

Nguồn

2017-08-18 06:44:06 gongsun

cách kích hoạt hộp văn bản nếu tôi chọn một tùy chọn khác trong hộp thả xuống

Trả lời

Các vấn đề liên quan