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）

我想使用jQuery id='transfertvers'或.add()方法将div元素（.html()）放在相应的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 this检索单击的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;
}

使用jQuery动态选择元素

1 个答案: