ノードが選択されたときにJsTreeフォームを送信

Question

私はツリー構造を作成するためにJsTreeを使用していますが、表示はうまくいきます。私は、順序付けられていないHTMLリストをツリーに入れています。各リスト要素には、 "title"属性の下に保存された値があります。

私がしたいのは、ユーザーがノードを選択すると、objectQuery.phpを実行するフォームが送信されるということです。

<form id="sampleForm" name="sampleForm" method="post" action="objectQuery.php"> 
<input type="hidden" name="userInputObject" id="total" value=""> 

私は通常のJavascriptやJsTreeを使用していないので、私はそれのいずれかの経験を持っていないと私は尋ねた同様の質問を見て、のように見えるスクリプトの私の独自のバージョンを試してみましたこの。

ツリーは、このスクリプトでのように作成されます。

<script> 
    $(function() { $('#treeViewer').jstree(); }); 
</script> 

そして私がフォームを送信してobjectQuery.phpに値を渡すために、他の質問をしようとした：今

<script> 
    $("#treeViewer").on("select_node.jstree", function(e){ 

      var selected_titles = []; 
      $("#treeViewer").jstree('get_selected').each(function() { 
       document.sampleForm.userInputObject.value = selected_titles.push(this.title); 
       document.forms["sampleForm"].submit(); 

      }); 

      // $.post("objectQuery.php"); 
     } 
    ); 
</script> 

とき私はノードを選択しますが、何も起こりません。誰かが正しい方向に私を押してください。

もう一度このトピックに関する他の質問と似ていますが、私は他の質問を見て、しばらく私自身で試してみました（そうでなければ、私は最初からそのスクリプトを作成できませんコードはjavascriptではありません）。

Answer 1

この解決策を見てください - 複数のノードを選択し、それらをjsonに＃totalフィールドに追加することができます（スニペットのデモンストレーションのために表示されます）。この場合、最後の項目が選択された後に別途フォームの提出を処理する必要があります（CTRLまたはSHIFTを押しながら項目をさらに選択できます）。最初に選択したものだけを自動提出する場合は、＃totalフィールドを設定した直後に送信コードを入力します。

$(function() { 
 
    $('#treeViewer').jstree(); 
 
    $("#treeViewer").on("select_node.jstree", function(e){ 
 
      var selected_titles = []; 
 
      var selectedIndexes = $("#treeViewer").jstree("get_selected", true); 
 
      $.each(selectedIndexes,function() { 
 
       selected_titles.push(this['li_attr'].title); 
 
      }); 
 
      $("#total").val(JSON.stringify(selected_titles)) 
 
      // for plaintext 
 
      $("#total_plain").val(selected_titles.join(",")) 
 
     } 
 
    ); 
 
    }); 
 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script> 
 
<link rel="stylesheet" href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css"/> 
 

 
<div id="treeViewer"> 
 
    <ul> 
 
    <li title="val1">Root node 1</li> 
 
    <li title="val2">Root node 2</li> 
 
    <li title="val3">Root node 3</li> 
 
    <li title="val4">Root node 4</li> 
 
    <li title="val5">Root node 5</li> 
 
    </ul> 
 
</div> 
 

 
<input type="text" name="userInputObject" id="total" value=""> 
 
<br> 
 
<input type="text" id="total_plain" value="">