एक चुनिंदा टैग में एक विकल्प कई मूल्यों को ले जा सकता है?

Question

मुझे HTML फॉर्म में कुछ विकल्पों के साथ एक चयन टैग मिला है:
(डेटा को एकत्र किया जाएगा और PHP का उपयोग करके संसाधित किया जाएगा)

परिक्षण:

<select name="Testing">  
  <option value="1"> One  
  <option value="2"> Two  
  <option value="3"> Three
</select>

क्या एक विकल्प के लिए कई मूल्यों को ले जाना संभव है जैसे जब कोई उपयोगकर्ता "वन" का चयन करता है, तो इस विकल्प से संबंधित कुछ अन्य मूल्य डेटाबेस को लिखे जाएंगे।

मुझे selectटैग कैसे डिज़ाइन करना चाहिए ताकि प्रत्येक विकल्प इस तरह से एक से अधिक मूल्य ले सकें:

<select name="Testing">  
  <option value="1" value="2010"> One  
  <option value="2" value="2122"> Two  
  <option value="3" value="0"> Three
</select>

Comments

क्या आप प्रसंस्करण के लिए सर्वर स्क्रिप्ट के रूप में php का उपयोग कर रहे हैं

— Jaison Justus

बस जिज्ञासु आपको इसकी आवश्यकता क्यों है?

— सलिल

@Salil। जिज्ञासा से बाहर अगर यह करना संभव है

— user327712

stackoverflow.com/questions/38180525/… मेरे लिए काम करें।

— कैयो एंड्रियान

Answer 1

ऐसा करने का एक तरीका, पहला एक एरे, दूसरा ऑब्जेक्ट:

    <select name="">
        <option value='{"num_sequence":[0,1,2,3]}'>Option one</option>
        <option value='{"foo":"bar","one":"two"}'>Option two</option>
    </select>

संपादित किया गया (जवाब देने के 3 साल बाद) दोनों मानों को JSON फॉर्मेट में (उपयोग करके JSON.stringify()) एक शिकायत के कारण कि मेरे प्रमाण का कॉन्सेप्ट उत्तर "एक नौसिखिया डेवलपर को भ्रमित कर सकता है।"

Comments

सुरुचिपूर्ण समाधान के लिए +1। NB यदि आप विकल्प दो का उपयोग करते हैं, तो मैं आपको जावास्क्रिप्ट इवेंट को प्राप्त करने के लिए $ .parseJSON ($ (यह) .val) ()) का उपयोग करने की सलाह देता हूं, यह मानते हुए कि आपको प्रत्येक मूल्य पर अलग से प्राप्त करने की आवश्यकता है।

— लुकास बी

-1 क्योंकि यह उत्तर इनपुट का मूल्यांकन करते समय ओपी को अपने कोड में एक बड़ी सुरक्षा समस्या के लिए प्रेरित करता है। इससे बचने का सबसे अच्छा तरीका JSON का उपयोग कर रहा है, जैसा कि @DavidHoerster द्वारा सुझाया गया है, क्योंकि इनपुट बेहतर व्यवहार है।

— फोटानुस

@fotanus: मेरे दूसरे उदाहरण है एक JSON ऑब्जेक्ट क्या अन्य प्रश्न का प्रस्ताव से अलग नहीं शाब्दिक। सरणी के लिए, यह सिर्फ एक उदाहरण है। यह वैसे भी इनपुट मानों को साफ करने के लिए सर्वर-साइड कोड की जिम्मेदारी है।

— रॉबस्टो

@Robusto दूसरा उदाहरण वैध JSON नहीं है। यह दूसरे हाथ में है, एक रूबी हैश। आपके उत्तर के साथ मेरी समस्या यह नहीं है कि आप क्या समझाते हैं या जानते हैं (क्योंकि मेरा मानना ​​है कि आप जानते हैं कि इसे कैसे बनाना है), यह इस बारे में है कि यह क्या छूटता है और एक नौसिखिया डेवलपर को भ्रमित कर सकता है (जैसा कि उसने मेरे एक दोस्त के साथ किया था)।

— फोटानुस

अच्छा समाधान, लेकिन JSON पर जाने के लिए स्ट्रिंग के लिए, संपत्ति के नाम को दोहरे उद्धरण चिह्नों के लिए मिला, जैसे: मूल्य = '{"फू": "बार", "एक": "दो"}

— लार्स-लेज़

Answer 2

मैं वास्तव में आज यह सोच रहा था, और मैंने इसे इस तरह php विस्फोट फ़ंक्शन का उपयोग करके हासिल किया:

HTML फ़ॉर्म (एक फ़ाइल जिसका नाम मैंने 'doublevalue.php':

    <form name="car_form" method="post" action="doublevalue_action.php">
            <select name="car" id="car">
                    <option value="">Select Car</option>
                    <option value="BMW|Red">Red BMW</option>
                    <option value="Mercedes|Black">Black Mercedes</option>
            </select>
            <input type="submit" name="submit" id="submit" value="submit">
    </form>

PHP क्रिया (एक फ़ाइल में जिसका नाम मैंने doublevalue_action.php) रखा है

    <?php
            $result = $_POST['car'];
            $result_explode = explode('|', $result);
            echo "Model: ". $result_explode[0]."<br />";
            echo "Colour: ". $result_explode[1]."<br />";
    ?>

जैसा कि आप कोड के पहले टुकड़े में देख सकते हैं, हम 2 विकल्पों के साथ एक मानक HTML चयन बॉक्स बना रहे हैं। प्रत्येक विकल्प में 1 मान होता है, जिसमें एक विभाजक होता है (इस उदाहरण में, '|') मूल्यों को विभाजित करने के लिए (इस मामले में, मॉडल और रंग)।

कार्रवाई पृष्ठ पर, मैं परिणामों को एक सरणी में विस्फोट कर रहा हूं, फिर प्रत्येक को कॉल कर रहा हूं। जैसा कि आप देख सकते हैं, मैं अलग हो गया हूं और उन्हें लेबल कर रहा हूं ताकि आप देख सकें कि यह किस कारण से हो रहा है।

मुझे उम्मीद है इससे किसी को सहायता मिलेगी :)

Comments

मुझे यह विधि बहुत सरल और बहुत उपयोगी लगती है, लेकिन मुझे आश्चर्य है कि यह विधि सभी ब्राउज़रों द्वारा समर्थित है?

— वायल करीम

बहुत सरल और कुशल दिखता है। धन्यवाद

— वरुण गर्ग

शानदार, अद्भुत, शानदार .. एक वर्ग का रत्न।

— user3370889

@WaiylKarim कोई कारण नहीं है कि यह सभी ब्राउज़रों द्वारा काम नहीं करना चाहिए। ब्राउज़र को इस बात की परवाह नहीं करनी चाहिए कि मूल्य में क्या है .. और अगर उन्हें इसमें कुछ प्रतीकों के साथ समस्या है, तो दूसरे को चुनने में कोई समस्या नहीं है। डॉट या # या _ या किसी भी वर्ण की तरह जो सर्वर साइड पर सीमांकक के रूप में इस्तेमाल किया जा सकता है

— Risinek

Answer 3

जैसा कि नीचे दिखाया गया है एक चयन विकल्प में कई मान होना संभव है।

<select id="ddlEmployee" class="form-control">
    <option value="">-- Select --</option>
    <option value="1" data-city="Washington" data-doj="20-06-2011">John</option>
    <option value="2" data-city="California" data-doj="10-05-2015">Clif</option>
    <option value="3" data-city="Delhi" data-doj="01-01-2008">Alexander</option>
</select>

आप नीचे दिखाए गए अनुसार jquery का उपयोग करके परिवर्तन घटना पर चयनित मूल्य प्राप्त कर सकते हैं।

$("#ddlEmployee").change(function () {
     alert($(this).find(':selected').data('city'));
});

आप इस लिंक में अधिक जानकारी पा सकते हैं

Answer 4

बहुविकल्पी अल्पविराम के साथ बहु विकल्प रखना है

पसंद

value ="123,1234"

और सर्वर साइड में उन्हें अलग करते हैं

Comments

सर्वर साइड में उन्हें कैसे अलग किया जाए? (php में)

— मुहम्मद अशफाक

जैसे विस्फोट का कार्य

— हैम एवजी

Answer 5

जब मुझे ऐसा करने की आवश्यकता होती है, तो मैं अन्य मूल्यों को डेटा-वैल्यू बनाता हूं और फिर js का उपयोग उन्हें छिपे हुए इनपुट में असाइन करने के लिए करता हूं

<select id=select>
<option value=1 data-othervalue=2 data-someothervalue=3>
//...
</select>

<input type=hidden name=otherValue id=otherValue />
<input type=hidden name=someOtherValue id=someOtherValue />

<script>
$('#select').change(function () {
var otherValue=$(this).find('option:selected').attr('data-othervalue');
var someOtherValue=$(this).find('option:selected').attr('data-someothervalue');
$('#otherValue').val(otherValue);
$('#someOtherValue').val(someOtherValue);
});
</script>

Comments

यह मुझे रास्ते का हिस्सा मिल गया - यह भी, यदि आप पहले से ही एक तत्व (बनाम चयनकर्ता क्वेरी कर रहे हैं) उन्हें वापस लाने के लिए .data () का उपयोग कर सकते हैं। जैसे myElem.data ('othervalue')

— jsh

यह तकनीकी रूप से ऐसा नहीं है जो ओपी पूछता है, लेकिन यह 100% है जिसे मैं यहां खोजते समय पूरा करने की कोशिश कर रहा था। +1 सरल, बेहतर पथ के लिए जो मैं मानता हूं, वह केवल चुनिंदा विकल्प में डेटा के दो टुकड़ों को संग्रहीत करने का अंतिम लक्ष्य था।

— लाइम

Answer 6

यदि आप लक्ष्य हैं कि इस जानकारी को डेटाबेस में लिखें, तो आपको valueविशेषता में प्राथमिक मूल्य और 'संबंधित' मान रखने की आवश्यकता क्यों है ? क्यों न केवल डेटाबेस को प्राथमिक मूल्य भेजें और डेटाबेस की संबंधपरक प्रकृति को बाकी का ख्याल रखें।

यदि आपको अपने OPTIONs में कई मान रखने की आवश्यकता है, तो एक ऐसा सीमांकक आज़माएँ जो बहुत आम न हो:

<OPTION VALUE="1|2010">One</OPTION>

...

या एक वस्तु शाब्दिक जोड़ें (JSON प्रारूप):

<OPTION VALUE="{'primary':'1','secondary':'2010'}">One</OPTION>

...

यह वास्तव में आप क्या करने की कोशिश कर रहे हैं पर निर्भर करता है।

Answer 7

प्रत्येक विकल्प के लिए मान डालें

<SELECT NAME="val">
   <OPTION VALUE="1" value="1:2:3:4"> 1-4  
   <OPTION VALUE="2" value="5:6:7:8"> 5-8  
   <OPTION VALUE="3" value="9:10:11:12"> 9-12
</SELECT>

php के मामले में सर्वर साइड पर, विस्फोट [सरणी] = विस्फोट ([परिधि], [पोस्ट वैल्यू]) जैसे कार्यों का उपयोग करें ;

$values = explode(':',$_POST['val']

उपरोक्त कोड रिटर्न में एक सरणी में केवल संख्याएँ होती हैं और ':' हटा दिया जाता है

Answer 8

मैंने डेटा विशेषताओं का उपयोग करके ऐसा किया। विस्फोट करने के अन्य तरीकों की तुलना में बहुत अधिक क्लीनर है।

एचटीएमएल

<select class="example">
    <option value="1" data-value="A">One</option>
    <option value="2" data-value="B">Two</option>
    <option value="3" data-value="C">Three</option>
    <option value="4" data-value="D">Four</option>
</select>

जे एस

$('select.example').change(function() {

    var other_val = $('select.example option[value="' + $(this).val() + '"]').data('value');

    console.log(other_val);

});

Answer 9

HTML डेटा विशेषताओं के बारे में क्या? यह सबसे आसान तरीका है। W3school से संदर्भ

आपके मामले में

$('select').on('change', function() {
  alert('value a is:' + $("select option:selected").data('valuea') +
    '\nvalue b is:' + $("select option:selected").data('valueb')
  )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select name="Testing">
  <option value="1" data-valuea="2010" data-valueb="2011"> One
    <option value="2" data-valuea="2122" data-valueb="2123"> Two
      <option value="3" data-valuea="0" data-valueb="1"> Three
</select>

Comments

इसके लिए काम करने के लिए "डेटा-" की आवश्यकता होती है, और दूसरे हिस्से को निचले मामले की आवश्यकता होती है।

— अरुण प्रसाद ES

Answer 10

मूल्यों को अलग करने के लिए एक सीमांकक का उपयोग करें।

<select name="myValues">
<option value="one|two">
</select>

<?php>
$value = filter_input(INPUT_POST, 'myValues');
$exploded_value = explode('|', $value);
$value_one = $exploded_value[0];
$value_two = $exploded_value[1];
?>

Answer 11

HTML में

<SELECT NAME="Testing" id="Testing">  
  <OPTION VALUE="1,2010"> One  
  <OPTION VALUE="2,2122"> Two  
  <OPTION VALUE="3,0"> Three
</SELECT>

जेएस के लिए

  var valueOne= $('#Testing').val().split(',')[0];
  var valueTwo =$('#Testing').val().split(',')[1];
  console.log(valueOne); //output 1
  console.log(valueTwo); //output 2010

या PHP के लिए

  $selectedValue= explode(',', $value);
  $valueOne= $exploded_value[0]; //output 1
  $valueTwo= $exploded_value[1]; //output 2010

Answer 12

HTML में डुप्लिकेट टैग पैरामीटर की अनुमति नहीं है। आप जो कर सकते थे, वह है VALUE="1,2010"। लेकिन आपको सर्वर पर मान पार्स करना होगा।

Answer 13

क्लाइंट-साइड पर विकल्पों को संग्रहीत करने के बजाय, ऐसा करने का दूसरा तरीका सर्वर-साइड पर एक सहयोगी / अनुक्रमित सरणी के उप-सरणी तत्वों के रूप में विकल्पों को संग्रहीत करना है। चुनिंदा टैग के मानों में तब उप-सरणी को निष्क्रिय करने के लिए उपयोग की जाने वाली कुंजी होती है।

यहाँ कुछ उदाहरण कोड है। यह PHP में लिखा है क्योंकि ओपी ने PHP का उल्लेख किया है, लेकिन यह जो भी सर्वर-साइड भाषा आप उपयोग कर रहे हैं, उसके लिए अनुकूलित किया जा सकता है:

<FORM action="" method="POST">
    <SELECT NAME="Testing">  
        <OPTION VALUE="1"> One </OPTION> 
        <OPTION VALUE="2"> Two </OPTION>
        <OPTION VALUE="3"> Three </OPTION>
    </SELECT>
</FORM>

पीएचपी:

<?php
$options = array(
    1 => array('value1' => '1', 'value2' => '2010'),
    2 => array('value1' => '2', 'value2' => '2122'),
    3 => array('value1' => '3', 'value2' => '0'),
);
echo 'Selected option value 1: ' . $options[$_POST['Testing']]['value1'] . '<br>';
echo 'Selected option value 2: ' . $options[$_POST['Testing']]['value2'] . '<br>';

Answer 14

यह दूसरों के लिए उपयोगी हो सकता है या नहीं भी हो सकता है, लेकिन मेरे विशेष उपयोग के मामले में मैं सिर्फ अतिरिक्त पैरामीटर चाहता था कि जब विकल्प चुना गया था तो फॉर्म से वापस पारित किया जाए - इन मापदंडों में सभी विकल्पों के लिए समान मान थे, इसलिए ... मेरा समाधान चयन के साथ फॉर्म में छिपे इनपुट को शामिल करना था, जैसे:

<FORM action="" method="POST">
    <INPUT TYPE="hidden" NAME="OTHERP1" VALUE="P1VALUE">
    <INPUT TYPE="hidden" NAME="OTHERP2" VALUE="P2VALUE">
    <SELECT NAME="Testing">  
        <OPTION VALUE="1"> One </OPTION> 
        <OPTION VALUE="2"> Two </OPTION>
        <OPTION VALUE="3"> Three </OPTION>
    </SELECT>
</FORM>

शायद स्पष्ट ... अधिक स्पष्ट होने के बाद आप इसे देखें।

Answer 15

आप कई विशेषताओं का उपयोग कर सकते हैं

<SELECT NAME="Testing" multiple>  
 <OPTION VALUE="1"> One  
 <OPTION VALUE="2"> Two  
 <OPTION VALUE="3"> Three

Comments

वह एक चयन से कई जानकारी चाहता है, न कि कई चयन।

— बामार