Question

这将打印表中的div数。

    <table>
<c:forEach var="events" items="${map.theme}">
<tr><td><div id="new" class="cls" style="width: 100px;height: 100px;background-color:red;" onclick="changedropdown('${events.themeid}');">You have selected <strong>red option</strong> so i am here</div></td>
</tr>
</c:forEach>
</table>

然后这也会在下拉列表中打印相同的结果

<div class="sel">
   <select class="form-control" id="theameselect">

<c:forEach var="events" items="${map.theme}">
      <option value="${events.themeid}">${events.themename}</option>

</c:forEach>
</select>
</div>

当我点击div时，相应的选项将在下拉列表中设置为选中，使用此功能。我尝试更改所选div的css。

 <script type="text/javascript">
 function changedropdown(themeid){
//set selected div values as selected in dropdown.Working well
var v=themeid;
$("div.sel select").val(v);
//it is not working well.
     $('.cls').addClass('v');
     $('.v').css("border", "14px double green");
     $('.cls').removeClass('v');

    }
</script>

但它改变了所有的div。 1）我需要在此函数中更改所选div的css。

Answer 1

HTML

 <div themeid="'${events.themeid}'" id="new" class="cls" style="width: 100px;height: 100px;background-color:red;" onclick="changedropdown('${events.themeid}');">You have selected <strong>red option</strong> so i am here</div>

JS

$('.cls[themeid="'+v+'"]').addClass('v');
...

示例：http://jsfiddle.net/3h11vqkq/

Answer 2

是的，因为所有div的changedropdown函数绑定。您必须通过$(this)

传递每个元素才能运行

<div id="new" class="cls" style="width: 100px;height: 100px;background-color:red;" onclick="changedropdown($(this),'${events.themeid}');">You have selected <strong>red option</strong> so i am here</div>

现在您已选择了功能元素..您可以更改所选元素的内容。这是一个例子：

function changedropdown(selectedElement, themeid)
{
   selectedElement.css("color","red");
}

Answer 3

如上所述，我将一个参数传递给函数。

onclick="changedropdown('${events.themeid}',this);"

也可以用它来选择div

$(element).css("border", "14px double green");

然后，为了一次选择一个div，首先删除类名，然后添加css，然后按以前的方式添加类名。下面的脚本。

function changedropdown(themeid,element){
$(element).css("border", "14px double green");
    $(element).removeClass('cls');
     var v=themeid;
     $("div.sel select").val(v);
     $(".cls").css("border", "0");
     $(element).addClass('cls');
}

感谢所有人......

如何在onclick函数中选择动态div

3 个答案: