একটি নির্বাচন ট্যাগে একটি বিকল্প একাধিক মান বহন করতে পারে?


103

আমি এইচটিএমএল আকারে কিছু অপশন সহ একটি নির্বাচিত ট্যাগ পেয়েছি:
(পিএইচপি ব্যবহার করে ডেটা সংগ্রহ এবং প্রক্রিয়া করা হবে)

পরীক্ষামূলক:

<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>

1
আপনি কি প্রক্রিয়াজাতকরণের জন্য সার্ভার স্ক্রিপ্ট হিসাবে পিএইচপি ব্যবহার করছেন
জাইসন জাস্টাস

1
শুধু কৌতুহল কেন আপনার এটি প্রয়োজন?
সলিল

2
@Salil। কৌতূহলের বাইরে এটি করা সম্ভব হলে
ব্যবহারকারী 327712

stackoverflow.com/questions/38180525/… আমার জন্য কাজ করুন।
Caio Andrian

উত্তর:


153

এটি করার এক উপায়, প্রথমে একটি অ্যারে, ২ য় বস্তু:

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

JSON.stringify()আমার প্রমাণ-ধারণা ধারণার উত্তর "একটি নবাগত বিকাশকারীকে বিভ্রান্ত করতে পারে" এমন অভিযোগের কারণে উভয় মানকে JSON ফর্ম্যাটে (ব্যবহার করার জন্য ) দু'টি মূল্য দেওয়ার জন্য সম্পাদিত (উত্তর দেওয়ার 3 বছর পরে) সম্পাদিত ""


9
মার্জিত সমাধানের জন্য +1। এনবি আপনি যদি বিকল্প দুটি ব্যবহার করেন, তবে আমি আপনাকে জাভাস্ক্রিপ্ট অবজেক্ট পেতে পরিবর্তনের ইভেন্টে $ .parseJSON ($ (এটি) .val ()) ব্যবহার করার পরামর্শ দিচ্ছি, ধরে নিই যে প্রতিটি মান পৃথকভাবে পেতে হবে।
লুকাস বি

1
-1 কারণ এই উত্তরটি ইনপুটটি মূল্যায়ন করার সময় ওপিকে তার কোডটিতে একটি বড় সুরক্ষার সমস্যা হতে প্ররোচিত করে। এটি এড়ানোর সর্বোত্তম উপায় হ'ল @ ডেভিডহোস্টার দ্বারা প্রস্তাবিত জেএসএন ব্যবহার করা, কারণ ইনপুটটি আরও ভাল আচরণ করা হয়েছে।
fotanus

5
@fotanus: আমার দ্বিতীয় উদাহরণ হল একটি JSON বস্তু অন্য প্রশ্ন প্রস্তাব থেকে আলাদা কোন আক্ষরিক। অ্যারে হিসাবে, এটি ঠিক একটি উদাহরণ। যে কোনওভাবে ইনপুট মান স্যানিটাইজ করা সার্ভার-সাইড কোডের দায়িত্ব।
রোবস্তো

1
@ রোবস্তো দ্বিতীয় উদাহরণটি বৈধ জেএসএন নয়। এটি অন্যদিকে একটি রুবি হ্যাশ। আপনার উত্তরের সাথে আমার সমস্যাটি আপনি যা ব্যাখ্যা করেছেন বা জানেন তা নিয়ে নয় (কারণ আমি বিশ্বাস করি আপনি কীভাবে এটি নিরাপদ করবেন জানেন), এটি কী বাদ দেয় এবং একটি নবাগত বিকাশকারীকে বিভ্রান্ত করতে পারে (যেমন এটি আমার এক বন্ধুর সাথে হয়েছিল)।
fotanus

11
ভাল সমাধান, তবে স্ট্রিংটি JSON এ পার্স করার জন্য, সম্পত্তির নামগুলিতে ডাবল উদ্ধৃতি পাওয়া যাবে, যেমন: মান = 'oo "foo": "বার", "এক": "দুই"}'
লার্স-লাসে

51

আমি আজ সত্যিই এটি ভাবছিলাম, এবং আমি পিএইচপি বিস্ফোরণ ফাংশনটি ব্যবহার করে এটি অর্জন করেছি:

এইচটিএমএল ফর্ম (একটি ফাইলের মধ্যে আমি 'ডাবলভ্যালু.পিপি' নাম দিয়েছি:

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

আপনি কোডের প্রথম অংশে দেখতে পাচ্ছেন, আমরা 2 টি বিকল্প সহ একটি মানক এইচটিএমএল নির্বাচন বাক্স তৈরি করছি। প্রতিটি বিকল্পের 1 টি মান রয়েছে, যার মানগুলি বিভক্ত করতে একটি বিভাজক (এই উদাহরণে, '|') রয়েছে (এই ক্ষেত্রে, মডেল এবং বর্ণ)।

অ্যাকশন পৃষ্ঠায়, আমি ফলাফলগুলিকে একটি অ্যারে রূপে বিস্ফোরিত করছি, তারপরে প্রত্যেককে কল করছি। যেমন আপনি দেখতে পাচ্ছেন, আমি সেগুলি পৃথক করেছি এবং লেবেল করেছি যাতে আপনি এটির ফলে তৈরির প্রভাবটি দেখতে পান।

আমি আশা করি এটা কারো সাহায্যে লাগবে :)


1
আমি এই পদ্ধতিটি খুব সহজ এবং খুব সহায়ক বলে মনে করি, তবে আমি ভাবছি যে এই পদ্ধতিটি সমস্ত ব্রাউজার দ্বারা সমর্থিত?
ওয়াইলাইল করিম

খুব সহজ এবং দক্ষ দেখাচ্ছে। ধন্যবাদ
বরুণ গার্গ

উজ্জ্বল, আশ্চর্যজনক, দুর্দান্ত .. একটি শ্রেণীর রত্ন।
ব্যবহারকারীর 3370889

3
@ ওয়াইলকারিম এটি সমস্ত ব্রাউজার দ্বারা কাজ না করার কারণ নেই। ব্রাউজারগুলির মূল্য কী হবে তা নিয়ে চিন্তা করা উচিত নয় And এবং যদি এতে কিছু প্রতীক নিয়ে তাদের সমস্যা থাকে তবে অন্য কোনওটি চয়ন করার কোনও সমস্যা নেই। বিন্দু বা # বা _ বা কোনও চরিত্রের মতো যা সার্ভারের পাশের ডিলিমিটার হিসাবে ব্যবহার করা যেতে পারে
রিসাইনেক

25

নীচে প্রদর্শিত হিসাবে একটি নির্বাচন বিকল্পে একাধিক মান পাওয়া সম্ভব।

<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'));
});

আপনি এই লিঙ্কে আরও বিশদ খুঁজে পেতে পারেন


16

একটি বিকল্প হ'ল কমা বিচ্ছিন্ন করে একাধিক মান স্থাপন করা

মত

value ="123,1234"

এবং সার্ভারের দিকে এগুলি পৃথক করুন


সার্ভারের পাশে তাদের আলাদা করবেন কীভাবে? (পিএইচপি তে)
মুহাম্মদ আশফাক

বিস্ফোরণ ফাংশনের মতো
হাইম এভগি

12

যখন আমার এটি করার দরকার হয়, আমি অন্যান্য মানগুলিকে ডেটা-মানগুলি তৈরি করি এবং তারপরে একটি লুকানো ইনপুটটিতে এএসএস দেওয়ার জন্য জেএস ব্যবহার করি

<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>

1
এটি আমার পথের অংশ পেয়েছে - এছাড়াও, আপনার কাছে ইতিমধ্যে কোনও উপাদান রয়েছে কিনা (বনাম নির্বাচক জিজ্ঞাসা করছেন) সেগুলি আবার ফিরিয়ে আনতে .data () ব্যবহার করতে পারে। যেমন myElem.data ('othervalue')
jsh

2
এটি প্রযুক্তিগতভাবে ওপি যা বলেছে তা নয়, তবে এখানে অনুসন্ধান করার সময় আমি যেটি অর্জন করার চেষ্টা করছিলাম সেটি এটি 100%। আমি যেটা ধরে নিয়েছি তার সহজ, আরও ভাল পথের জন্য +1 হ'ল একটি নির্বাচনের বিকল্পে কেবলমাত্র দুটি টুকরা তথ্য সঞ্চয় করার শেষ লক্ষ্য।
চুন

5

যদি আপনার লক্ষ্য হ'ল ডেটাবেজে এই তথ্যটি লেখা হয়, তবে আপনাকে কেন valueএট্রিবিউটটিতে একটি প্রাথমিক মান এবং 'সম্পর্কিত' মান থাকতে হবে ? কেন কেবল ডাটাবেসে প্রাথমিক মানটি প্রেরণ করবেন না এবং ডাটাবেসের আপেক্ষিক প্রকৃতিটিকে বাকি যত্ন নিতে দিন।

আপনার যদি আপনার একাধিক মান থাকতে হয় তবে OPTIONএকটি ডিলিমিটার চেষ্টা করুন যা খুব সাধারণ নয়:

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

...

বা একটি বস্তু আক্ষরিক (JSON ফর্ম্যাট) যুক্ত করুন:

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

...

এটি আপনি যা করার চেষ্টা করছেন তার উপর নির্ভর করে।


4

প্রতিটি বিকল্পের জন্য মান রাখুন

<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>

পিএইচপি ক্ষেত্রে সার্ভার সাইডে, বিস্ফোরিত [অ্যারে] = বিস্ফোরণ ([ডেলিমিটার], [পোস্ট মান]] এর মতো ফাংশন ব্যবহার করুন ;

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

উপরের কোডটি প্রদান করে একটি অ্যারেতে কেবল সংখ্যা থাকে এবং ':' মুছে ফেলা হয়


4

আমি ডেটা অ্যাট্রিবিউট ব্যবহার করে এটি করেছি। অন্যান্য পদ্ধতি বিস্ফোরিত করার চেষ্টা করার চেয়ে অনেক ক্লিনার

এইচটিএমএল

<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);

});

4

এইচটিএমএল ডেটা অ্যাট্রিবিউট সম্পর্কে কী? এটি সবচেয়ে সহজ উপায়। ডাব্লু 3 স্কুল থেকে রেফারেন্স

তোমার ক্ষেত্রে

$('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>


1
এটি কাজ করার জন্য "ডেটা-" প্রয়োজন এবং দ্বিতীয় অংশটি নিম্নতর হওয়া দরকার।
অরুণ প্রসাদ ইএস

1

মান পৃথক করতে একটি ডিলিমিটার ব্যবহার করুন।

<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];
?>

1

এইচটিএমএলে

<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

বা পিএইচপি জন্য

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

0

ডুপ্লিকেট ট্যাগ প্যারামিটারগুলি এইচটিএমএলে অনুমোদিত নয়। আপনি কি করতে পারেন, হয় VALUE="1,2010"। তবে আপনাকে সার্ভারে মানটি পার্স করতে হবে।


0

ক্লায়েন্ট-সাইডে বিকল্পগুলি সংরক্ষণ করার পরিবর্তে এটি করার আরেকটি উপায় হ'ল বিকল্পগুলি সার্ভার-সাইডে কোনও এসোসিয়েটিভ / ইনডেক্সেড অ্যারের উপ-অ্যারে উপাদান হিসাবে সংরক্ষণ করা। নির্বাচিত ট্যাগের মানগুলিতে কেবল সাব-অ্যারেটি অবলম্বন করতে ব্যবহৃত কীগুলি থাকবে।

এখানে কিছু উদাহরণ কোড। এটি পিএইচপি-তে লেখা হয়েছে যেহেতু অপি পিএইচপি উল্লেখ করেছে, তবে আপনি যে সার্ভার-সাইড ভাষা ব্যবহার করছেন তা এটির সাথে খাপ খাইয়ে নেওয়া যেতে পারে:

<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>';

0

এটি অন্যের পক্ষে দরকারী হতে পারে বা নাও হতে পারে তবে আমার নির্দিষ্ট ব্যবহারের ক্ষেত্রে আমি বিকল্পটি নির্বাচন করার সময় ফর্মটি থেকে অতিরিক্ত পরামিতিগুলি ফিরে যেতে চেয়েছিলাম - এই পরামিতিগুলির সমস্ত বিকল্পের জন্য একই মান ছিল, তাই ... আমার সমাধান নির্বাচনের সাথে ফর্মের মধ্যে লুকানো ইনপুটগুলি অন্তর্ভুক্ত করা ছিল, যেমন:

<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>

আপনি এটি দেখার পরে সম্ভবত সুস্পষ্ট ... আরও সুস্পষ্ট।


-5

আপনি একাধিক বৈশিষ্ট্য ব্যবহার করতে পারেন

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


তিনি একাধিক নির্বাচন নয়, একটি নির্বাচন থেকে একাধিক বিট তথ্য চান।
বারমার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.