使用jQuery动态选择元素

Question

我一直在尝试获取动态表单，其中显示的select元素之一将根据单选按钮的值进行更改。

单选按钮

<div class="field"> 
    <label for="f_transfert">Transfert du défunt... : </label> 
    <input name="f_transfert" type="radio" value="vers ossuaire" id="vossuaire">Vers ossuaire&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <input name="f_transfert" type="radio" value="vers jardin du souvenir" id="vjardin">Vers jardin du souvenir&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <input name="f_transfert" type="radio" value="vers colombarium" id="vcolumbarium">Vers colombarium 
</div> 

我的页面是jsp与jstl嵌入式，jstl在这里用来生成通缉名单的HTML代码。然而，3个潜在的select元素与页面生成（没有ajax和没有服务器请求，而页面显示时，只使用JavaScript来修改DOM和HTML）

我想放在一个div元素（ id='transfertvers'）中相应的html元素，使用jQuery .add()或.html()方法

<div class="field"> 
    <div>TEST JQUERY</div> 
    <div id="transfertvers"> 
     <!-- insertion dynamique jQuery --> 
    </div> 
</div> 

直到现在，它的确定与检索无线电值

jQuery('[name=f_transfert]').click(function(event){ 
    alert(jQuery('[name=f_transfert]:checked').val()); 
}); 

现在我应该使用这样的功能：

switch(jQuery('[name=f_transfert]:checked').val()){ 
    case "vers ossuaire" : 
     return ${htmloss} ; 
     break; 
    case "vers jardin du souvenir" : 
     return ${htmljds} ; 
     break; 
    case "vers colombarium" : 
     return ${htmlcol} ; 
} 

...把​​文档的HTML预期的选择...

现在我觉得有点失落，因为我不知道关于写什么，写在哪里。

我的jsp页面包括JS和jQuery的ready()回调：

jQuery(document).ready(function() { 

我也有一个独立的.js文件与功能，如果需要，我可以有。

Answer 1

如果你想不添加HTML：

jQuery('[name=f_transfert]').click(function(event) { 
 
    switch (this.value) { 
 
    case "vers ossuaire" : 
 
     jQuery("#transfertvers").html(${htmloss}); 
 
     break; 
 
    case "vers jardin du souvenir" : 
 
     jQuery("#transfertvers").html(${htmljds}); 
 
     break; 
 
    case "vers colombarium" : 
 
     jQuery("#transfertvers").html(${htmlcol}); 
 
     break; 
 
    } 
 
});

您可以检索用var这个点击的html元素。

编辑

这是因为c：out print escape html。你需要打印它unescape，或者你可以在javascript中使用它。

function unescapeHTML(htmlstring) { 
 
    var elem = document.createElement("div"); 
 
    elem.innerHTML = htmlstring; 
 
    return elem.childNodes.length === 0 ? "" : elem.childNodes[0].nodeValue; 
 
}