需要用户能够 "add an option" 到 select 列表

Question

编辑将医疗手术事件添加到 Google 日历的表单。表格上有一个（外科医生列表）select 框，它从 index.php 文件中提取它的选项值。我正在尝试更改它以使用户能够通过在文本框中键入名称然后单击按钮 "add".

来 "add a surgeon" 到那个 select 框列表

我的解决方案是在 "surgeons list" select 框下添加一个文本字段和一个按钮。输入姓名然后单击提交按钮会将新外科医生的姓名写入 XML 文件。然后我打算让 "surgeons list" select 框从 XML 文件中提取它的选项值。

我能够创建将新外科医生姓名添加到 XML 文件的输入框和按钮，但现在我有两个提交按钮。当我尝试将新外科医生的名字添加到 XML 文件时，它认为我已经完成了整个表格并且我正在尝试提交它。如何在不提交表单的情况下将新选项值发送到 XML 文件？任何信息表示赞赏。

这是当前的 select 框（尚未从 xml 文件中提取）和下面我的 xml 添加字段...

    <input type="hidden" name="action" value="<?php if($edit) echo 'edit';else echo 'insert';?>">
    <input type="hidden" name="event_id" value="<?php if($edit) echo $event_data['id'];else echo '0';?>">
    <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="form-group">
    <label for="event_title">Surgeon Name <span class="required">*</span></label>
    <select name="event_title" id="event_title" class="form-control required">
    <option value="BERASI"> BERASI</option>
    <option value="BERGHOFF"> BERGHOFF</option>
    <option value="BIGGS"> BIGGS</option>
    <option value="BORUS"> BORUS</option>
    <option value="BURKE"> BURKE</option>
    <option value="CANNONE"> CANNONE</option>
    <option value="DEARBORN"> DEARBORN</option>
    </select>
    </div>
    </div>

    <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="form-group">
    <form action="index.php" method="post">
    <label for="surgeon" >Surgeon</label>
    <input type="text" name="surgeon" class="btn btn-secondary"/>
    <input type="submit" name="ok" value="add"/>
    </div>
    </div>

与我的添加冲突的表单上的当前提交按钮在这里...

    <input type="hidden" name="action" value="<?php if($edit) echo 'edit';else echo 'insert';?>">
    <input type="hidden" name="event_id" value="<?php if($edit) echo $event_data['id'];else echo '0';?>">
    <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="form-group">
    <label for="event_title">Surgeon Name <span class="required">*</span></label>
    <select name="event_title" id="event_title" class="form-control required">
    <option value="BERASI"> BERASI</option>
    <option value="BERGHOFF"> BERGHOFF</option>
    <option value="BIGGS"> BIGGS</option>
    <option value="BORUS"> BORUS</option>
    <option value="BURKE"> BURKE</option>
    <option value="CANNONE"> CANNONE</option>
    <option value="DEARBORN"> DEARBORN</option>
    </select>
    </div>
    </div>

    <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="form-group">
    <form action="index.php" method="post">
    <label for="surgeon" >Surgeon</label>
    <input type="text" name="surgeon" class="btn btn-secondary"/>
    <input type="submit" name="ok" value="add"/>
    </div>
    </div>

这是我表格的图片... enter image description here

这是 Swing JSC 代码...

    import java.awt.BorderLayout;
    import java.awt.Cursor;
    import java.awt.Dimension;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    import java.awt.event.KeyAdapter;
    import java.awt.event.KeyEvent;
    import java.awt.event.WindowAdapter;
    import java.awt.event.WindowEvent;
    import java.awt.event.WindowListener;
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileOutputStream;
    import java.io.ObjectInput;
    import java.io.ObjectInputStream;
    import java.io.ObjectOutput;
    import java.io.ObjectOutputStream;
    import java.net.URL;

    import javax.swing.Box;
    import javax.swing.BoxLayout;
    import javax.swing.ComboBoxModel;
    import javax.swing.JComboBox;
    import javax.swing.JEditorPane;
    import javax.swing.JFrame;
    import javax.swing.JLabel;
    import javax.swing.JOptionPane;
    import javax.swing.JPanel;
    import javax.swing.JScrollPane;
    import javax.swing.JTextField;
    import javax.swing.event.HyperlinkEvent;
    import javax.swing.event.HyperlinkListener;

    public class MemComboBoxDemo extends JFrame {

      protected MemComboBox urlComboBox = new MemComboBox();

      public MemComboBoxDemo() {
        super();
        setSize(300, 100);
        getContentPane().setLayout(new BorderLayout());

        JPanel p = new JPanel();
        p.setLayout(new BoxLayout(p, BoxLayout.X_AXIS));
        p.add(new JLabel("Address"));

        urlComboBox.load("addresses.dat");
        ComboBoxListener lst = new ComboBoxListener();
        urlComboBox.addActionListener(lst);

        MemComboAgent agent = new MemComboAgent(urlComboBox);

        p.add(urlComboBox);
        getContentPane().add(p, BorderLayout.NORTH);

        WindowListener wndCloser = new WindowAdapter() {
          public void windowClosing(WindowEvent e) {
            urlComboBox.save("addresses.dat");
            System.exit(0);
          }
        };
        addWindowListener(wndCloser);

        setVisible(true);
        urlComboBox.grabFocus();
              }

      class ComboBoxListener implements ActionListener{
        public void actionPerformed(ActionEvent evt) {
          System.out.println( urlComboBox.getSelectedItem());
        }
      }

      public static void main(String argv[]) {
        new MemComboBoxDemo();
      }
    }

    class MemComboAgent extends KeyAdapter {
      protected JComboBox comboBox;

      protected JTextField editor;

      public MemComboAgent(JComboBox c) {
        comboBox = c;
        editor = (JTextField) c.getEditor().getEditorComponent();
        editor.addKeyListener(this);
      }

      public void keyReleased(KeyEvent e) {
        char ch = e.getKeyChar();
        if (ch == KeyEvent.CHAR_UNDEFINED || Character.isISOControl(ch))
          return;
        int pos = editor.getCaretPosition();
        String str = editor.getText();
        if (str.length() == 0)
          return;

        for (int k = 0; k < comboBox.getItemCount(); k++) {
          String item = comboBox.getItemAt(k).toString();
          if (item.startsWith(str)) {
            editor.setText(item);
            editor.setCaretPosition(item.length());
            editor.moveCaretPosition(pos);
            break;
          }
        }
      }
    }

    class MemComboBox extends JComboBox {
      public static final int MAX_MEM_LEN = 30;

      public MemComboBox() {
        super();
        setEditable(true);
      }

      public void add(String item) {
        removeItem(item);
        insertItemAt(item, 0);
        setSelectedItem(item);
        if (getItemCount() > MAX_MEM_LEN)
          removeItemAt(getItemCount() - 1);
      }

      public void load(String fName) {
        try {
          if (getItemCount() > 0)
            removeAllItems();
          File f = new File(fName);
          if (!f.exists())
            return;
          FileInputStream fStream = new FileInputStream(f);
          ObjectInput stream = new ObjectInputStream(fStream);

          Object obj = stream.readObject();
          if (obj instanceof ComboBoxModel)
            setModel((ComboBoxModel) obj);

          stream.close();
          fStream.close();
        } catch (Exception e) {
          System.err.println("Serialization error: " + e.toString());
        }
      }

      public void save(String fName) {
        try {
          FileOutputStream fStream = new FileOutputStream(fName);
          ObjectOutput stream = new ObjectOutputStream(fStream);

          stream.writeObject(getModel());

          stream.flush();
          stream.close();
          fStream.close();
        } catch (Exception e) {
          System.err.println("Serialization error: " + e.toString());
       }
      }
    }

Answer 1

看起来 Jquery 在这种情况下会派上用场。您可以做的只是检查用户何时单击添加按钮，获取字段的当前值，然后使用 Javascript / Jquery 将其添加到 select 框中:

<input type="text" class="addingElement">
<button class="addingButton">Add</button>
<select name="event_title" id="event_title" class="form-control required">
    <option value="BERASI"> BERASI</option>
    <option value="BERGHOFF"> BERGHOFF</option>
    <option value="BIGGS"> BIGGS</option>
    <option value="BORUS"> BORUS</option>
    <option value="BURKE"> BURKE</option>
    <option value="CANNONE"> CANNONE</option>
    <option value="DEARBORN"> DEARBORN</option>
</select>
<script>
$(document).ready(function(){
    $('.addingButton').on('click', function(){
        var newElement = $('.addingElement').val();
        $('#event_title').append('<option></option>').attr('value', newElement).html(newElement);
    })
});
</script>

需要用户能够 "add an option" 到 select 列表

Need user to be able to "add an option" to a select list

php

xml

add

drop-down-menu