1. घर
  2. सवाल और जवाब
  3. एचटीएमएल   के साथ गद्दे का चयन करें

एचटीएमएल   के साथ गद्दे का चयन करें

2012-07-19 9 views
12

में समस्या है मेरे पास एक HTML चयन है जिसमें नीचे दिए गए आइटम हैं।एचटीएमएल   के साथ गद्दे का चयन करें

<SELECT id="mylist" size=5 > 
    <OPTION Value="100">100</OPTION> 
    <OPTION Value="200">200</OPTION> 
    <OPTION Value="210">210</OPTION> 
    <OPTION Value="211">211</OPTION> 
</SELECT>

enter image description here

अब अगर मैं SELECT अंदर क्लिक करें और टाइप 21 तो यह आइटम 210 जो पहला आइटम 21. सभी अच्छे के साथ शुरू होता है का चयन करेंगे।

बाद में मैं ग्राहक द्वारा अनुरोध किए गए आइटम के बाईं ओर एक पैडिंग जोड़ना चाहता था। लेकिन जल्द ही मुझे एहसास हुआ कि SELECT में गद्दी (कम से कम IE6 और IE7 जो मैं परीक्षण किया पर) IE में काम नहीं करेगा

तो मैं &nbsp;&nbsp;

<SELECT id="mylist" size=5 > 
    <OPTION Value="100">&nbsp;&nbsp;100</OPTION> 
    <OPTION Value="200">&nbsp;&nbsp;200</OPTION> 
    <OPTION Value="210">&nbsp;&nbsp;210</OPTION> 
    <OPTION Value="211">&nbsp;&nbsp;211</OPTION> 
</SELECT>

enter image description here

जोड़ा अब मैं गद्दी की नकल कर सकते हैं।

लेकिन मैंने खोज विकल्प खो दिया। जब मैं आईई में 21 टाइप करता हूं तो यह 210 का चयन नहीं करेगा। यह क्रोम में अच्छी तरह से काम करता है। कृपया अपने विचार साझा करें।

नमूना here

स्रोत

2012-07-19 PraveenVenu

+5

कभी कभी अपने IE उपयोगकर्ताओं बस वाला हैं भुगतना पड़ता है। मैं व्यक्तिगत रूप से, मैं आईई 6 उपयोगकर्ताओं को दंडित करता हूं और अपनी साइट को उनके लिए जितना संभव हो उतना खराब दिखता हूं :) लेकिन क्या आप एक विकल्प में चयन विकल्पों को लपेट नहीं सकते हैं, और फिर उन्हें टक्कर देने के लिए रिश्तेदार स्थिति का उपयोग कर सकते हैं? *** अस्वीकरण: यह एक अर्थपूर्ण समाधान नहीं है। दुर्भाग्यवश आपको आईई के साथ कुछ हैकिंग करना है। –

+0

पहले से ही कोशिश की है। लेकिन आईई भी इसका विरोध कर रहा है :) – PraveenVenu

+0

क्या आपके पास कहीं भी लाइव संस्करण स्थापित है? – Chad

उत्तर

2

कैसे एक div में यह लपेटकर के बारे में:

HTML:

<div class="listwrapper"> 
    <SELECT id="mylist" size=5 > 
     <OPTION Value="100">100</OPTION> 
     <OPTION Value="200">200</OPTION> 
     <OPTION Value="210">210</OPTION> 
     <OPTION Value="211">211</OPTION> 
    </SELECT> 
</div>​

सीएसएस:

.listwrapper 
{ 
    padding: 0px 0px 0px 15px; 
    border: solid 1px silver; 
    width: 50px; 
} 
.listwrapper select, 
.listwrapper select:active 
{ 
    border: none 0px white; 
    width: 50px; 
} 
​

My Fiddle

स्रोत

2012-07-22 11:42:05

+0

यह केवल सामग्री को पैडिंग के बजाय पूरे सूची बॉक्स को पैड करेगा। – PraveenVenu

+1

@PraVn।ये तो कमाल की सोच है। सूची बॉक्स सीमा हटाएं और इसे div के अंदर रखें। सूची बॉक्स की शैली की नकल करने के लिए div पर सीमा को सेट करें। Div div को जैसे कि यह सूची बॉक्स है। –

+0

आह, मुझे यह भी नहीं मिला: आपको div की सीमा दिखाई देगी, न कि चयन की सीमा इतनी दृष्टि से (और केवल दृष्टि से, चयनित विकल्प की चौड़ाई देखें), यह वही प्रभाव प्राप्त करेगी (एक बहु-रेखा चयन पर, ड्रॉपडाउन चयन पर नहीं) – FelipeAls

-1

मैं इस बनाया है का पता लगाएं, मुझे लगता है कि आप कुछ इस तरह हैं: MyFiddle

<style> 
    option { 
    width: 40px; 
    text-align: center; 
    } 
</style> 

<SELECT id="mylist" size=5 > 
    <OPTION Value="100">100</OPTION> 
    <OPTION Value="200">200</OPTION> 
    <OPTION Value="210">210</OPTION> 
    <OPTION Value="211">211</OPTION> 
</SELECT>

स्रोत

2012-07-20 07:48:49

+0

यह तब काम नहीं करेगा जब मानों की अलग-अलग लंबाई होती है क्योंकि बाएं हाशिए असमान हो जाएंगे। – PraveenVenu

-1

उपयोग & nbsp IE में उचित गद्दी पाने और दबाया कुंजी के आधार पर आइटम का चयन करने महत्वपूर्ण घटना का उपयोग करें।

स्रोत

2012-07-23 08:56:06 Koti

+0

मैं इसे उत्तर के रूप में चुन सकता हूं अगर आप मुझे इस – PraveenVenu

+0

@PraVn के लिए जावास्क्रिप्ट दे सकते हैं, तो मेरी पोस्ट जांचें, मैं इसके बारे में थोड़ी अधिक जानकारी में गया। – jzacharia

1

<style> एक इनलाइन तत्व इसलिए एक गद्दी जोड़ने display:block; साथ तथापि IE6 में काम नहीं करेगा इस दूर किया जा सकता

उपयोग

<style> 
    #mylist 
{ 
    padding-left:10px; 
    display:block; 
} 
</style>​

आशा इस मदद करता है में मदद करता है। Fiddle here

स्रोत

2012-07-24 08:25:38

+0

मैंने पहले ही इस सवाल में कहा है कि पैडिंग आईई 6 और 7 – PraveenVenu

+0

डिस्प्ले के साथ काम नहीं करेगा: ब्लॉक; मुझे लगता है कि काम करना चाहिए। –

+0

यह काम नहीं करेगा। – PraveenVenu

-1

यह IE6/7 के साथ अपनी समस्या का हिस्सा हो सकता है: डिफ़ॉल्ट सीएसएस मूल्यों डाल करने के लिए

IE's Default CSS Values

बेवकूफ जगह। IE8 और नए में यह समस्या प्रतीत नहीं होती है।

स्रोत

2012-07-24 19:09:10 tahdhaze09

-1

jQuery के लिए इसके समाधान हैं, या आप आइटम चुनने के लिए onkeypress ईवेंट का उपयोग कर सकते हैं।

एचटीएमएल

<element onkeypress="JavaScriptCodeHere">

जे एस

object.onkeypress="JavaScriptCodeHere"

यहाँ से, कुंजी दबाने पर आधारित संख्या को खींचने के लिए अपने जे एस स्क्रिप्ट के साथ JavaScriptCodeHere बदलें। मैं इसे आपके लिए नहीं बनाऊंगा, क्योंकि यह साइट इस साइट के लिए नहीं है, लेकिन मैं आपको सही दिशा में इंगित कर सकता हूं।

keychar और numcheck मदद कर सकता है;)

स्रोत

2012-07-24 23:29:31 jzacharia

+1

धन्यवाद। मैंने कीप में एक फ़ंक्शन लिखा और इसे संयोजित किया। यह भी स्पष्ट करने के लिए एक टाइमर ट्रिगर किया कि दूसरी कुंजी 2 सेकंड में दबाया नहीं गया है। – PraveenVenu

0

दे छोड़ दिया गद्दी विकल्प

#mylist 
{ 
    padding-left: 10px; 
}

जांच स्थानांतरित करने के लिए आवश्यक इस fiddle

स्रोत

2012-07-26 11:04:00

+0

यह आईई 6/7 – PraveenVenu

+0

@flem में काम नहीं कर रहा है: क्या कोई कारण है कि आप 1-चरित्र संपादन के साथ तेजी से उत्तराधिकार में दर्जनों पदों को बंप कर रहे हैं? – BoltClock

0

हाँ, विजय द्वारा जवाब सही तरीका है। हमें हमेशा किसी अन्य की तुलना में CSS का उपयोग करना चाहिए।

यहाँ उदाहरण है: -

<select size="10" style="text-align:center"> 
<option value="1">First</option> 
<option value="2">Second</option> 
<option value="3">Third</option> 
<option value="4">Four</option> 
</select>

आकार लाना अनिवार्य नहीं है।

आशा है कि यह पूरी तरह से मददगार है।

स्रोत

2012-07-26 13:25:23

+0

यह http://jsfiddle.net/NUwTS/ देखें यह अच्छा नहीं लग रहा है। – PraveenVenu

1

सीएसएस

​select { width:auto; } 
option { text-align:center; }

यह वास्तव में काम में संरेखित उपयोग करने के लिए प्रयास करें। यहां the proof in jsfiddle

स्रोत

2012-07-27 10:54:19 InspiredJW

0

जावास्क्रिप्ट कोड, जो ब्राउज़र खोज को ओवरराइड करता है, इस तरह हो सकता है। उदाहरण के लिए रन कोड स्निपेट देखें।

if (!dimon) { 
 
\t var dimon = {}; 
 
} 
 
if (!dimon.select) { 
 
\t dimon.select = { 
 
\t \t /** 
 
\t \t * Contains last typed character, and last selected option value 
 
\t \t * (integer). For example, { "AlternativeMobileSelectionMenu" : { "char" : 
 
\t \t * "s", "index" : 115 }, "AlternativeTariffSelectionMenu" : { "char" : 
 
\t \t * "a", "index" : 0 } } 
 
\t \t */ 
 
\t \t hist : {}, 
 
\t \t search : function(select, e) { 
 
\t \t \t // JQuery select object 
 
\t \t \t var select = $(select); 
 
\t \t \t if (!select) { 
 
\t \t \t \t return; 
 
\t \t \t } 
 
\t \t \t // id of HTML select, which is located under 0 index 
 
\t \t \t var sid = select[0].id; 
 

 
\t \t \t // dynamic HTML event 
 
\t \t \t e = e || window.event; 
 
\t \t \t var keycode = e.which || e.keyCode; 
 
\t \t \t keycode = String.fromCharCode(keycode); 
 
\t \t \t // Search should be case-insensitive 
 
\t \t \t keycode = keycode.toLowerCase(); 
 

 
\t \t \t if (keycode < 'a' && keycode > 'z') { 
 
\t \t \t \t // handle only alphabetic character is typed 
 
\t \t \t \t return; 
 
\t \t \t } 
 

 
\t \t \t // Prevent default browser behavior 
 
\t \t \t if (e.preventDefault) { 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t } else { 
 
\t \t \t \t e.returnValue = false; 
 
\t \t \t } 
 

 
\t \t \t if (!this.hist[sid]) { 
 
\t \t \t \t this.hist[sid] = {}; 
 
\t \t \t } 
 
\t \t \t var lastChar = this.hist[sid]['char']; 
 
\t \t \t if (keycode != lastChar) { 
 
\t \t \t \t // if a new character is typed, reset 
 
\t \t \t \t // last typed character 
 
\t \t \t \t this.hist[sid]['char'] = ''; 
 
\t \t \t \t // and last selected option 
 
\t \t \t \t this.hist[sid]['index'] = -1; 
 
\t \t \t } 
 

 
\t \t \t // options which matches the input character 
 
\t \t \t var filteredOptions = new Array(); 
 
\t \t \t // all select options 
 
\t \t \t var options = select.find("option"); 
 

 
\t \t \t for (var i = 0; i < options.length; i++) { 
 

 
\t \t \t \t var opt = $(options[i]); 
 
\t \t \t \t // Example option text 
 
\t \t \t \t // "  30|25   █ Magenta Mobil L mit Top-Handy" 
 
\t \t \t \t // "                  Sony Xperia Z2 schwarz (1,00 EUR)" 
 
\t \t \t \t var text = opt.text().toLowerCase(); 
 

 
\t \t \t \t // Regular expression finds the first alphabetic character 
 
\t \t \t \t var regexp = new RegExp("[^a-z]*([a-z]{1}).*", "i"); 
 
\t \t \t \t var result = regexp.exec(text); 
 
\t \t \t \t // the output will be: 
 
\t \t \t \t // 'm' 
 
\t \t \t \t // 's' 
 
\t \t \t \t text = result != null ? result[1] : ''; 
 

 
\t \t \t \t if (opt.val() != '' && text.indexOf(keycode) == 0) { 
 
\t \t \t \t \t // add option value, if it matches 
 
\t \t \t \t \t filteredOptions.push(opt.val()); 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t var size = filteredOptions.length; 
 
\t \t \t if (size == 0) { 
 
\t \t \t \t return; 
 
\t \t \t } 
 

 
\t \t \t // Example, if we have 2 mobile devices in the list 
 
\t \t \t // Samsung Galaxy S5 
 
\t \t \t // Sony Xperia Z2 
 
\t \t \t // and type 'S', then Samsung will be selected, 
 
\t \t \t // if we type 'S' for the second time, then Sony will be selected, 
 
\t \t \t // and if we type 'S' once again, then Samsung will be selected 
 
\t \t \t // again. 
 
\t \t \t // value of the first suitable option 
 
\t \t \t var firstOpt = parseInt(filteredOptions[0]); 
 
\t \t \t // value of the last suitable option 
 
\t \t \t var lastOpt = parseInt(filteredOptions[size - 1]); 
 
\t \t \t // Last selected option value 
 
\t \t \t var lastSelected = this.hist[sid]['index']; 
 

 
\t \t \t if (lastSelected == -1) { 
 
\t \t \t \t // Character is typed for the first time 
 
\t \t \t \t this.hist[sid]['char'] = keycode; 
 
\t \t \t \t this.hist[sid]['index'] = firstOpt; 
 
\t \t \t \t select.val(this.hist[sid]['index']); 
 
\t \t \t \t select.change(); 
 

 
\t \t \t } else if (lastSelected >= 0 && lastSelected < lastOpt) { 
 
\t \t \t \t // The same character is typed, just increment the option value 
 
\t \t \t \t this.hist[sid]['index'] = lastSelected + 1; 
 
\t \t \t \t select.val(this.hist[sid]['index']); 
 
\t \t \t \t select.change(); 
 

 
\t \t \t } else if (lastSelected >= 0 && lastSelected == lastOpt) { 
 
\t \t \t \t // The same character is typed, but the last suitable option was 
 
\t \t \t \t // already selected before. 
 
\t \t \t \t // So select the first option again 
 
\t \t \t \t this.hist[sid]['index'] = firstOpt; 
 
\t \t \t \t select.val(this.hist[sid]['index']); 
 
\t \t \t \t select.change(); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
}
<html> 
 
<head> 
 
<script 
 
\t src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
\t <select id="devices" size="1" 
 
\t \t onkeypress="dimon.select.search(this, event)"> 
 
\t \t <option value="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apple iPhone 
 
\t \t \t 5s 64GB Gold (199,95 EUR)</option> 
 
\t \t <option value="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Samsung 
 
\t \t \t Galaxy S5 LTE+ weiß (1,00 EUR)</option> 
 
\t \t <option value="2">&nbsp;30|25&nbsp;█&nbsp;Sony Xperia Z2 
 
\t \t \t Tablet LTE+ (19,95 EUR)</option> 
 
\t \t <option value="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia 
 
\t \t \t Z2 schwarz (1,00 EUR)</option> 
 
\t \t <option value="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia 
 
\t \t \t Z2 weiß (1,00 EUR)</option> 
 
\t </select> 
 
</body> 
 
</html>

स्रोत

2015-03-17 09:22:52 Dimon579

संबंधित मुद्दे

 संबंधित मुद्दे