Erstellen wählen Sie die Eingabe mit dem button in den Optionen

Es ist möglich, erstellen Sie ein select-Eingang mit einem Knopf oder einen link innerhalb der Optionen? Ich möchte es verwenden, um Liste einige Werte, und haben die Möglichkeit, mit einem button "Wert Schaffen" in den Optionen. Ich weiß nicht, ob dies möglich ist. Ich versuchte es mit einem href, aber Sie behandeln es als text.

Wäre dies das ideale Szenario: 

<select name="things">
    <option value="1">Thing One</option>
    <option value="2">Thing Two</option>
    <option value="3">Thing Three</option>
    <option value=""><button>New Thing</button></option>
</select>

Habe ich die Suche, aber ohne Glück. Nicht jemand weiß, ein jQuery-plugin, oder so ähnlich funktionieren könnte?

  • Nein, Sie können nicht jedem HTML-innen einer option element, nur mit text. Sie benötigen dazu entweder ein element in der Liste zu emulieren eine select oder verwenden Sie einen change-handler auf die select element.
InformationsquelleAutor arielcr | 2014-01-17
  1. 7

    Hier ist eine einfache Implementierung:

    $('select[name=things]').change(function() {
    if ($(this).val() == '')
    {
        var newThing = prompt('Enter a name for the new thing:');
        var newValue = $('option', this).length;
        $('<option>')
            .text(newThing)
            .attr('value', newValue)
            .insertBefore($('option[value=]', this));
        $(this).val(newValue);
    }
});

    Natürlich, das könnte besser gemacht werden, und mehr sauber, aber es ist ein Anfang.

    Demonstration

    Nach dem Lesen Ihre Kommentare, es scheint, Sie wollen einfach nur den redirect der Benutzer zu einer anderen form, wenn Sie wählen Sie eine option. In diesem Fall, Sie können einfach tun dies:

    $('select[name=things]').change(function() {
    if ($(this).val() == '')
    {
        window.location.href = 'CreateThingForm'; //Replace with the actual URL
    }
});
    InformationsquelleAutor p.s.w.g
  2. 1

    Sollten Sie nicht tun es auf diese Weise, nicht den button inside-option.

    alternativ können Sie :

    <select name="things" onchange="checkAndAddOption(this)">

    oder 

    <select name="things" onclick="checkAndAddOption(this)">
.
.
.
</select>
<script>
function checkAndAddOption(selectElement) {
   if (selectElement.value === "") {
        var opt = document.createElement('option');
        opt.value = 'newVal';
        opt.innerHTML = 'textToDisplay';
        selectElement.appendChild(opt);
   }
}
</script>
    • Ich will nicht das zu tun, was ich brauchen, ist zum umleiten der Benutzer auf den "Erstellen, Was Form", wenn Sie klicken Sie auf den link oder button in das wählen Sie.
    • Dann ändern Sie einfach den code zu erstellen, die option Standort.href = "url-der-form'
    InformationsquelleAutor Shehabic
Schreibe einen Kommentar