如何選擇特定選項時需要輸入

我只是在<select>列表中選擇特定選項時才需要輸入字段。如何選擇特定選項時需要輸入

例如：

<select id="model"> 
    <option value="model1">Model 1</option> 
    <option value="model2">Model 2</option> 
    <option value="model3">Model 3</option> 
    <option value="model4">Model 4</option> 
</select> 

<input type="text" name="extra">

輸入extra如果選擇模式2或3得到必需的。

我該怎麼做？

來源

2013-05-16 carlroger

你是什麼意思_創建輸入required_？你有驗證碼嗎？如果是，請在驗證之前檢查'model'下拉菜單的值。 –

是的，我的意思是我需要驗證表單並使輸入字段成爲必需。 – carlroger

嘗試使用jQuery驗證插件。 –

下面是一個完全正常工作示例演示如何使用jQuery來解決這兩種情況。請注意，您必須包含對jQuery庫的引用，正如我在頭標記中所做的那樣。您也可以將javascript/jQuery移動到單獨的文件中，並簡單地將其引用。

Live example (jsFiddle) here

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
//alert('Document is ready'); 
       $('#model').change(function() { 
        var sel = $(this).val(); 
        if (sel == 'model2' || sel == 'model3') $('input[name=extra]').show(); 
       }); 

       $('input[name=btn_submit]').click(function() { 
        var sel = $('#model').val(); 
        if (sel == 'model2' || sel == 'model3') { 
         if ($('input[name=extra]').val() == '') { 
          alert('Please complete all fields'); 
          return false; //prevent submit from submitting 
         }else{ 
          alert('Your entry was submitted'); 
         } 
        }else{ 
         //Model is NOT 2 or 3 so don't check 
         alert('Your entry was submitted without checking input field value.'); 
        } 
       }); 
      }); 
     </script> 
    </head> 
<body> 

    <select id="model"> 
     <option value="model1">Model 1</option> 
     <option value="model2">Model 2</option> 
     <option value="model3">Model 3</option> 
     <option value="model4">Model 4</option> 
    </select> 

    <input type="text" name="extra" style="display:none"> 
    <input type="submit" name="btn_submit" value="Submit It"> 

</body> 
</html>

來源

2013-05-16 21:22:34 gibberish

完美！謝謝您的幫助。 – carlroger

那麼你只能用JavaScript客戶端做得這麼多。最終，你將不得不在服務器上強制執行此操作。要在不依賴瀏覽器特定實現或HTML5的情況下執行此操作，您需要使用事件處理程序手動檢查想要的值。

<form onsubmit="return validateFormData(this)">

而且一定要給你的選擇元素的名稱，便於使用的：

<select id="model" name="model"></select>

在JavaScript

然後：

function validateFormData(oForm) { 
    //Let's say that a value of 'model3' makes 'extra' required 
    if(oForm.model.value=='model3') { 
     if(oForm.extra.value=='') { 
      //returning false will prevent the form from submitting 
      return false; 
     } 
    } 
}

來源

2013-05-16 21:14:21

選擇某個選項時，您可以添加所需的類。然後在提交檢查所需的元素，以確保東西它不是空

$('#model').change(function() { 
    // check if it's model2 or model3 
    var isRequired = /model2|model3/i.test(this.value); 
    $('input[name=extra]').toggleClass('required',isRequired);  
}); 

$('form').submit(function(){ 
    // get all empty required fields 
    var reqEmpty = $('.required').filter(function(){ 
     return $.trim(this.value).length === 0; 
    }); 
    // if any empty required fields are found - do something 
    if(reqEmpty.length){ 
     alert('empty required field'); 
     return false; 
    } 
});

在小提琴的紅色邊框只是告訴你你已經添加所需的類。

FIDDLE

來源

2013-05-16 21:22:40

假設你想設置required財產：

$('#model').change(function(){ 
    var index = this.selectedIndex; 
    $('input[name="extra"]').prop('required', function(){ 
     return index == 1 || index == 2; 
    }); 
});

JS Fiddle demo。

來源

2013-05-16 21:51:20

如何選擇特定選項時需要輸入

回答

相關問題