ขอสอบถามเกี่ยวกับการเลือก Select option แล้วให้โชว์ Input อัพโหลดไฟล์

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ขอสอบถามเกี่ยวกับการเลือก Select option แล้วให้โชว์ Input อัพโหลดไฟล์

ขอสอบถามเกี่ยวกับการเลือก Select option แล้วให้โชว์ Input อัพโหลดไฟล์
กรณี Select เลือกตำแหน่งแล้ว
แล้วอยากให้เช็คว่า ตำแหน่งไหนยังไม่มีไฟล์ Job Des
ถ้ามี ไม่ต้องให้อัพโหลดไฟล์
ถ้าไม่มี จะต้องแสดง input ให้อัพโหลดไฟล์ครับ










ิbondsanti 203.172.69.xxx 08-12-2022 09:46:16

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
แนวทางแนะนำ ให้เราทำแบบโชว์ Input อัพโหลดไฟล์ ทุกๆ ตำแหน่ง
จากนั้นใช้วิธีการประยุกต์ เพื่อซ่อน หรือแสดง กรณีมีไฟล์ และไม่มีไฟล์
เงื่อนไขการมีไฟล์ อาจจะใช้วิธีดึงมาตั้งแต่โหลดหน้าฟอร์มครั้งแรก แล้วแทรกเป็น
data- attribute เข้าไปใน select option ใช้ค่าที่ไปเมื่อเลือก ไปใช้เป็น
เงื่อนไขการซ่อนหรือแสดง Input อัพโหลดไฟล์ 

  <style>
    .wrap-file{
      display:none;
    }
  </style>
  <select name="select_1">
    <option value="">Select</option>
    <option value="1" data-jobfile="0">Data 1</option>
    <option value="2" data-jobfile="1">Data 2</option>
    <option value="3" data-jobfile="0">Data 3</option>
  </select>
  <div class="wrap-file">
  <input type="file">
  </div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    $(function(){
      $("[name='select_1']").on("change",function(){
        let selectedVal = $(this).val();
        let jobfile = $(this).find("option:selected").data("jobfile");
        let statusShow = (jobfile==1 || jobfile===undefined)?"none":"block";
        $(".wrap-file").css("display",statusShow);
      });
    });
  </script>

ตัวอย่าง DEMO

บทความแนะนำที่เกี่ยวข้อง
ประยุกต์รวมข้อมูลแถวในตาราง ด้วย jquery ร่วมกับ data attributeอ่าน 9,998
ninenik 27.55.80.xxx 08-12-2022
 ความคิดเห็นที่ 2

ขอบพระคุณมากครับ


ิbondsanti 49.230.203.xxx 09-12-2022 18:27






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ