動態社交引擎表單元素添加onchange特定的表單元素

Question

我是SE 4.20新增的。我有一個創建form元素onchange這個表單元素的問題。

對於說明， 我有一個表格。我能夠在這個表單元素的變化上返回一些選擇值。但是現在我想添加一個表單元素來改變這個元素。

Answer 1

如果用戶更改了選擇框，您想要添加一個表單元素，如文本框？也許是這樣的：

$("#selectBoxId").change(function(){ 
    $("#formId").append("<input type='text' name='additionalFormElement' />"); 
}); 

Answer 2

下面是HTML：

<div class="form-elements"> 
<div id="typeName-wrapper" class="form-wrapper"> 
    <div id="typeName-label" class="form-label"> 
     <label for="typeName" class="required">Type</label> 
    </div> 
    <div id="typeName-element" class="form-element"> 
     <select name="typeName" id="typeName"> 
      <option value="Grant">Grant</option> 
      <option value="Cooperative Agreements">Cooperative Agreements</option> 
      <option value="Publication">Publication</option> 
     </select> 
    </div> 
</div> 
<div id="resourceName-wrapper" class="form-wrapper"> 
    <div id="resourceName-label" class="form-label"> 
     <label for="resourceName" class="required">Name</label> 
    </div> 
    <div id="resourceName-element" class="form-element"> 
     <select name="resourceName" id="resourceName"> 
      <option value="ABC">ABC</option> 
      <option value="XYZ">XYZ</option> 
     </select> 
    </div> 
</div> 

這裏是mootool JS：

$('typeName').addEvent('change', function(event) { 
     var typeName = $('typeName').value; 
     var base_path = "<?php echo $this->baseUrl();?>/"; 
     var url = 'http://xxxxxxx.com/test/resource/getresourcebytype'; 
     var request= new Request.JSON({ 
      url: url, 
      method: 'GET', 
      data: {"typeName":typeName}, 
      onSuccess: function(response) 
      { 
       console.log(response); 
       //clear the select box 
       var name = $('resourceName'); 
       while (name.firstChild) { 
        name.removeChild(name.firstChild); 
       } 
       //now add new option 
       for (var i = 0; i < response.length; i++){ 
        console.log(response[i]); 
        new Element('option', {'value': response[i].value, 'text':response[i].label}).inject(name); 
       } 

      }, onFailure: function(){ 

       console.log('failed'); 
      } 
     }); 
     request.send(); 
    });