JavaScript/jQuery根据一个公共属性选择多个项目，并将它们作为用分隔符分隔的字符串传递给JavaBean

JavaScript/jQuery Select multiple items according to a common attribute and pass them as a String separated by a delimiter to the JavaBean

本文关键字：分隔符 分隔 字符串 JavaBean 项目 jQuery 一个 JavaScript 选择 属性      更新时间：2023-09-26

我遇到了这个问题，因为我对JavaScript和jQuery的了解有限。我使用的是JSF 2.0和PrimeFaces 3.5。我在PrimeFaces中有一个有序的项目列表，我想获得选定的项目，以便在单击删除按钮时删除它们。当列表中的某个项目被选中时，其状态将变为"ui状态高亮显示"。当浏览器处于调试模式并且选择了列表中的项目时，可以看到这一点。按住Ctrl键可以选择多个项目。然而，按照目前的实现方式，只有一个项目的索引被发送到后端的JavaBean，因此即使选择了多个项目，也只有一个从列表中删除。

如何将JavaScript部分更改为以字符串的形式发送给后端的我的JavaBean，或者用分隔符（如"，"）分隔的所有选定项，或者再次用分隔符分隔的选定项的所有索引？

JavaScript部分：

   <script type="text/javascript">
 $(document).ready(function() {
 $(document).on('click', '.delete_answer_button', function() {
    var selectedItem = $(this).closest('.orderlist_wrapper').find('.ui-orderlist-item.ui-state-highlight');
    if (selectedItem.length > 0) {
        deleteAnswer1([
            {name: 'index', value: selectedItem.closest('ul').find('li').index(selectedItem)}
        ]);
    }
 });
});
  </script>

JSF/PrimeFaces部分：

<h:form id="form">
  <h:panelGroup layout="block" styleClass="form_field_wrapper orderlist_wrapper">
                <p:orderList id="a123" value="#{testBean.newQuestion.answers}" var="answerswer" itemValue="#{answer}" converter="testConvert" controlsLocation="left">
                    <f:facet name="caption">Answers</f:facet>
                    <p:column>
                        #{answer.text}
                    </p:column>
                </p:orderList>
              <h:panelGroup layout="block" styleClass="form_field" style="width: 40px;">
                    <p:commandButton value="" icon="ui-icon-minusthick" type="button" styleClass="icon_button delete_answer_button" />
                    <p:remoteCommand name="deleteAnswer1" actionListener="#{testBean.deleteAnswer}" update=":form:result :form:a123" />
                </h:panelGroup>
    </h:panelGroup>
    <h:outputText id="result" value="#{testBean.result}"/>
</h:form>

JavaBean中的deleteAnswer方法：

public void deleteAnswer(ActionEvent event) {
    int index = Integer.parseInt(FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("index"));
    List<Answer> temp = getNewQuestion().getAnswers();
    Answer temp2 = temp.get(index);
    result = "deleted " + getNewQuestion().getAnswers().get(index).toString();
    getNewQuestion().getAnswers().remove(index);
}

$(document).ready(function() {
  $(document).on('click', '.delete_answer_button', function() {
       $(this).closest('.orderlist_wrapper').find('.ui-orderlist-item.ui-state-highlight').each(function()    {
            deleteAnswer1([
                {name: 'index', value: $(this).closest('ul').find('li').index($(this))} 
        ]);
    });
 });
});

您希望使用"each"迭代器循环遍历您的项目，然后为每个项目调用delete answer功能。否则，您可以在构建数组（或您需要的任何容器）时循环遍历它们，然后在循环之后，只调用deleteAnswer函数一次并将其传递给数组。

我不确定deleteanswer语法，但您可以在每个循环中放入一些警报，以确定您需要什么。

我发现了如何根据Stan的循环将索引附加到String。谢谢你帮助斯坦。

$(document).ready(function() {
  $(document).on('click', '.delete_answer_button', function() {
      var indexString='';
         $(this).closest('.orderlist_wrapper').find('.ui-orderlist-item.ui-state-highlight').each(function()    {
        indexString+= $(this).closest('ul').find('li').index($(this)) + ',';
      });
         deleteAnswer1([
                        {name: 'index', value: indexString} 
                ]);
   });
相关文章：