Wie füge ich Dropdown in HTML Form hinzu?

Question

Ich muss diese Anrede innerhalb des Formularattributs hinzufügen.

Hier ist das notwendige Codesegment, das ich verwende.

<div class="form-group"> 
    <label>Name with Initials</label> 
    <select name="name_with_initials" id=""> 
        <option selected="selected" value="Operation">Mr.</option> 
        <option value="NPA">Mrs.</option> 
        <option value="BTS-Kurunegala">Miss.</option> 
    </select> 
    <input type="text" name="name_with_initials" class="form-control" value=""> 
    </div> 

Wie geht das?

Answer 1

Suchen Sie dieser Suchbegriffe? Überprüfen Sie das folgende Snippet.
Es gibt "Input-Group" -Klasse in Twitter Bootstrap, die Ihnen dieses Ergebnis geben kann.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
<form> 
 
    
 
    <label>Name with Initials</label> 
 

 
    
 
    <div class="input-group"> 
 
     <span class="input-group-addon"> 
 
     <select name="sal"> 
 
      <option selected="selected" value="Mr.">Mr.</option> 
 
      <option value="Mrs.">Mrs.</option> 
 
      <option value="Miss">Miss</option> 
 
     </select> 
 
     </span> 
 
     <input type="text" name="Name" class="form-control" placeholder="Full Name" oninput="FullName.value = sal.value +' '+ Name.value"> 
 
    </div><!-- /input-group --> 
 
    <input type="hidden" name="FullName" /> 
 
    
 
</form> 
 
</div>

Answer 2

Sie müssen die Klasse form-control in select Tag hinzufügen.

<select class="form-control" id=""> 

Hier ist die vollständige HTML-

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
<form> 
 
    <div class="form-group" style="border:1px solid red;padding:10px;"> 
 
    <label>Name with Initials</label> 
 
    <select class="form-control" id=""> 
 
        <option selected="selected" value="Operation">Mr.</option> 
 
        <option value="NPA">Mrs.</option> 
 
        <option value="BTS-Kurunegala">Miss.</option> 
 
    </select> 
 
    </div> 
 
</form> 
 
</div>

Answer 3

Ich hoffe, dass es Ihr Problem

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
<form> 
 
    
 
    <label>Name with Initials</label> 
 

 
    <div class="form-group" style="border:1px solid black; padding:05px;"> 
 
\t \t <select class="" id="" style="width=50px; padding:04px;"> 
 
\t \t <option selected="selected" value="mr">Mr.</option> 
 
\t \t <option value="mrs">Mrs.</option> 
 
\t \t <option value="miss">Miss.</option> 
 
\t \t </select> 
 
\t \t <input type="text" name="fname" placeholder=" First Name" style="padding:1px;"> 
 
\t \t <input type="text" name="lname" placeholder=" Last Name" style="padding:1px;"> 
 
    </div> 
 
    
 
</form> 
 
</div>

lösen

Answer 4

Ich habe eine <form> und eine Schaltfläche zum Senden für das Beispiel hinzugefügt. Grundsätzlich müssen Sie den Wert der Option, um den Text nach innen zu ändern, wie folgt aus:

<option value="Mr." selected>Mr.</option> 
    <option value="Mrs.">Mrs.</option> 
    <option value="Miss.">Miss.</option> 

und Sie müssen den Wert des <select> mit einigen JavaScript/jQuery erhalten und es in einer Variablen setzen und aktualisieren es immer wenn die Auswahl geändert wird. Wenn das Formular gesendet wird, müssen Sie den Text in der Eingabe abrufen und die Variable (und ein Leerzeichen) vor dem eingegebenen Text einfügen.

title = $('#name_with_initials').val(); 
 
function titleChange() { 
 
    title = $('#name_with_initials').val(); 
 
} 
 
function formSubmit() { 
 
    $('.form-control').val(title + ' ' + $('.form-control').val()); 
 
    alert($('.form-control').val()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <form onsubmit="formSubmit()"> 
 
    <label>Name with Initials</label> 
 
    <select name="name_with_initials" id="name_with_initials" onchange="titleChange()"> 
 
     <option value="Mr." selected>Mr.</option> 
 
     <option value="Mrs.">Mrs.</option> 
 
     <option value="Miss.">Miss.</option> 
 
    </select> 
 
    <input type="text" name="name_with_initials" class="form-control" value=""> 
 
    <input type="submit"> 
 
    </form> 
 
</div>