Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > ทำยังไงให้ Datalist ตอนเลือกโชว์ text ไม่ใช่โชว์ค่าใน value คับ

ทำยังไงให้ Datalist ตอนเลือกโชว์ text ไม่ใช่โชว์ค่าใน value คับ

เริ่มหัวข้อใหม่

sonicpola

โพสกระทู้ ( 19 )
บทความ ( 0 )

Code (PHP)

<input list="names" name="name">
<datalist id="names">
  <option value="1">นาย ก</option>
  <option value="2">นาย ข</option>
  <option value="3">นาย ค</option>
</datalist>

เวลาแสดงในเว็บตรงดรอปดาวมันจะโชว์ค่า 1 2 3 อะคับแล้วจะมี นาย ก, นาย ข, นาย ค อยู่มุมขวาเล็กๆ
ไม่อยากให้มันแสดง 1 2 3 อะคับจะให้โชว์ นาย ก อย่างงี้ต้องทำยังไงคับ

Tag : PHP, HTML/CSS

Date : 2016-03-11 23:41:14

By : sonicpola

View : 3308

Reply : 5

No. 1

Chaidhanan

โพสกระทู้ ( 9,586 )
บทความ ( 2 )

มันไม่น่าจะเกี่ยวกับ input list ไม่น่าจะเกี่ยวกับการแสดงผล
และ รูปแบบ การใช้ ก็ไม่ถูก มั่วมาถามหรือเปล่า ไปศึกษารูปแบบการใช้งาน ก่อนไหมครับ

ถ้าทำแล้วเอาโค๊ดมาลงไว้ครับ เดี๋ยวจะช่วยเช็ค
แบบพูดลอยว่าทดลองเขียนโค๊ดแล้วไม่ได้ผลตามต้องการไม่อยากเชื่อครับ
เพราะคำถามกับ tag ที่มาแสดงมันคนละเรื่องกัน

Date : 2016-03-12 05:53:29

By : Chaidhanan

No. 2

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

http://www.w3schools.com/tags/tag_datalist.asp

Date : 2016-03-12 08:31:59

By : apisitp

No. 3

sonicpola

โพสกระทู้ ( 19 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : Chaidhanan เมื่อวันที่ 2016-03-12 05:53:29

รายละเอียดของการตอบ ::

Code (PHP)

<datalist id="listinv">
          <?php
            $strSQLcla = "SELECT * FROM clamant
            INNER JOIN title ON title.title_id = clamant.title_id
            ORDER BY clamant_id ASC ";
            $objQuerycla = mysql_query($strSQLcla) or die ("Error Query [".$strSQLcla."]");
              while($objResultcla = mysql_fetch_array($objQuerycla))
              {
          ?>
        <option value="<?php echo $objResultcla["clamant_id"];?>" ><?php echo $objResultcla["clamant_fname"]; echo " ";  echo $objResultcla["clamant_lname"];?></option>
          <?php
              }
          ?>
          </datalist>

ได้แบบนี้คับ ผมอยากให้โชว์ชื่อกับนามสกุลแล้วส่งค่า id ไปคับ

Date : 2016-03-12 10:02:18

By : sonicpola

No. 4

Chaidhanan

โพสกระทู้ ( 9,586 )
บทความ ( 2 )

Code (JavaScript)

<option value="<?php echo $objResultcla["clamant_fname"];?> />

datalist มันเป็นแค่ข้อมูลที่ใช้ช่วยค้นหาเมื่อเราคีย์ข้อมูล
อย่านำเอา option ของ select มารวมกันกับ option ของ datalist ครับ มันคนละอย่างกัน
ข้อมูลมันอยู่ใน <input type=text name="name" list="datalist_id">

ในกรณีที่คุณอยากได้ id ด้วย คุณต้องเพิ่มเติม attribute มาเก็บ id แล้วเขียนโปรแกรมขึ้นมาอ่านค่าอ้างอิง

ก็สำรวจความต้องการของตัวเองให้ดี บางทีหันกับไปใช้ <select > อาจจะตรงความต้องการมากกว่า

Date : 2016-03-12 10:57:07

By : Chaidhanan

No. 5

mr.v

โพสกระทู้ ( 4,756 )
บทความ ( 8 )

กระทู้นี้เข้าใจว่าหลายปีแล้ว แต่ขอตอบไว้เผื่อคนมาหาเกี่ยวกับ datalist ทีหลังแล้วเจอเหมือนผม

การทำ datalist ให้ตอนเลือกไม่โชว์ค่า value
อ้างอิงจาก https://stackoverflow.com/a/29882539/128761
เราจะไม่ใช้ <option value="data value">display text</option> แต่เราจะใช้ data- attribute มาแทน
ตัวอย่าง <option data-value="data value">display text</option>

Code

<input id="input-name-value">
<input id="input-name" list="datalist-name">
<datalist id="datalist-name">
<option data-value="aaa">Aaa</option>
<option data-value="bbb">Bbb</option>
</datalist>

แล้วเพิ่ม event listener
Code (JavaScript)

let inputElement = document.getElementById('input-name');
inputElement.addEventListener('input', function(event) {
    let dataListOptions = document.getElementById('datalist-name).childNodes;
    for(let i = 0; i < dataListOptions.length; i++) {
        let option = dataListOptions[i];
        if (option.innerText === inputElement.value) {
            document.getElementById('input-name-value').value = option.dataset.value;
            break;
        }
    }
}, false);

Date : 2019-11-14 11:47:57

By : mr.v

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ทำยังไงให้ Datalist ตอนเลือกโชว์ text ไม่ใช่โชว์ค่าใน value คับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก