HTML फॉर्म <बूट> के रूप में बूटस्ट्रैप ड्रॉपडाउन का उपयोग कैसे करें

Question

मुझे लगता है कि मैं सघन हो सकता हूं। मैं नामों की सूची से चयन करने के लिए बूटस्ट्रैप ड्रॉपडाउन बटन का उपयोग करना चाहता था। क्या मैं इसे सादे HTML और / या बहुत सरल jQuery में कर सकता हूं?

IE मैं एक बूटस्ट्रैप ड्रॉपडाउन का उपयोग एचटीएमएल फॉर्म select इनपुट के रूप में करना चाहता हूं।

<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu1565"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select Client
    <span class="caret"></span>
</button>
<ul class="dropdown-menu" name="xx-selectClient" aria-labelledby="dropdownMenu1565">
    <li><a id="yy-lloydBrayton">Lloyd Brayton</a></li>
    <li><a id="yy-muiThreet">Mui Threet</a></li>
    <li><a id="yy-wilsonBritton"> Wilson Britton</a></li>

    <li><a id="yy-gilbertMinto">Gilbert Minto</a></li>
    <li><a id="yy-thomasinaLaney">Thomasina Laney</a></li>

मैंने ठीक दिखने के लिए फ़ॉर्म को एक साथ रखा (आदि का उपयोग करना आसान हो) और फिर इसे कार्यात्मक बनाने के लिए सफाई के बारे में सेट किया। मूल बीएस "सिलेक्ट" बल्कि बदसूरत है इसलिए यदि मैं कर सकता हूं तो ड्रॉपडाउन सूची का उपयोग करेगा। बाकी सब ठीक चल रहा है लेकिन मैं एक चयन के रूप में ड्रॉपडाउन का उपयोग करने के तरीके के रूप में फंस गया हूं।

EDIT: Cory और पिछले SO पोस्टर के लिए धन्यवाद, यह मेरे लिए काम करता है और मुझे लगा कि यह किसी और के लिए मददगार हो सकता है

<script>
$(".dropdown-menu a").click(function(){
var selectId = $(this).attr('id')
    $('#formId').submit(function(eventObj) {
        $(this).append("<input type='hidden' name='selectClient' value="+selectId+"/> ");
        return true;
    });
})
</script>

यदि आप पाठ को id नहीं चाहते हैं, तो तीसरी पंक्ति में उपयोग करें:

var sel = $(this).text()

EDIT: नीचे आदर्श का योगदान विषय से बाहर है, लेकिन शानदार है। मैं मूल्यों को पारित करने की कोशिश कर रहा था, लेकिन आदर्श के समाधान में आवश्यक उपयोगकर्ता प्रतिक्रिया प्रदान करने वाले बटन के लिए चयनित उपयोगकर्ता का नाम जोड़ा गया है। तो आप के साथ अंत:

enter image description here

एक सही समाधान लोगों के लिए धन्यवाद।

jquery html forms twitter-bootstrap

7

BeNice 16 नवम्बर 2015, 02:07

Answer 1

आप कुछ इस तरह की तलाश में हैं? http://jsfiddle.net/rszens8z/1/

  <div class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button"      id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria- expanded="true">
     Dropdown
     <span class="caret"></span>
  </button>
   <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a id="yy-lloydBrayton">Lloyd Brayton</a></li>
     <li><a id="yy-muiThreet">Mui Threet</a></li>
     <li><a id="yy-wilsonBritton"> Wilson Britton</a></li>

     <li><a id="yy-gilbertMinto">Gilbert Minto</a></li>
     <li><a id="yy-thomasinaLaney">Thomasina Laney</a></li>
   </ul>
 </div>

आप इसे BS CSS http://getbootstrap.com/compenders/#} में निर्मित कुछ के साथ बदल सकते हैं btn - ड्रॉपडाउन

4

Cory 16 नवम्बर 2015, 22:23

Answer 2

शायद यह वही है जो आप चाहते थे ..: डी

function dropdownMenu1565Set(val){
	if(val.innerHTML!=""){$('#dropdownMenu1565').val(val.innerHTML);$('#dropdownMenu1565').html(val.innerHTML);}
	else{$('#dropdownMenu165').val('');$('#dropdownMenu165').html('Select Client');}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<div class="dropdown"><button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu1565"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select Client
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" name="xx-selectClient" aria-labelledby="dropdownMenu1565">
    <li><a id="yy-lloydBrayton" onclick="dropdownMenu1565Set(this);">Lloyd - 1 _ $ Brayton</a></li>
    <li><a id="yy-muiThreet" onclick="dropdownMenu1565Set(this);">Mui Threet</a></li>
    <li><a id="yy-wilsonBritton" onclick="dropdownMenu1565Set(this);">Wilson Britton</a></li>
    <li><a id="yy-gilbertMinto" onclick="dropdownMenu1565Set(this);">Gilbert Minto</a></li>
    <li><a id="yy-thomasinaLaney" onclick="dropdownMenu1565Set(this);">Thomasina Laney</a></li>
  </ul>
</div>

3

Adarsh Mohan 18 नवम्बर 2015, 05:09

HTML फॉर्म <बूट> के रूप में बूटस्ट्रैप ड्रॉपडाउन का उपयोग कैसे करें

2 जवाब

संबंधित सवाल

नए सवाल

jquery