如何仅显示多个下拉值数组中的1个？

Question

May I ask for assistance on how to do this? Dropdown option will hold 2 values, but only 1 of the value will be regonized as its own, and then the 2nd value will only be used for outputting into text fields.

Will it be possible to do it like that?

This is the dropdown.

<select name="mydropdown" id="mydropdown">
    <option value="0">Please select</option>
    <option value="{1:2}">Option 1</option>
    <option value="{3:4}">Option 2</option>
</select>

<input type="text" name="myreceiver" id="myreceiver" value="" />

This is the script

$("#mydropdown").change(function () {
    $("#myreceiver").val("Array Value " + this.value);
});

Output should display either 1 or 2 for Option 1, and 3 or 4 for Option 2.

EDIT: Would it also be possible for <option value="{1:2}">Option 1</option> to be recognized as value: 1 only, and <option value="{3:4}">Option 2</option> as value: 4?

Basically what would happen is

<option value="{1:2}">Option 1</option> <!-- The data must only be recognized as value 1 as option value will be saved in database --> 
<option value="{3:4}">Option 2</option> <!-- The data must only be recognized as value 3 as option value will be saved in database -->

But for <input type="text" name="myreceiver" id="myreceiver" value="" /> , when you select Option 1 or Option 2, It will recognize as Option 1 = 2, and Option 2 = 4.

What will happen basically in example for Option 1 is array value 1 will be for dropdown value only, and array value 2 will only be outputted in input text.

Dropdown Option will hold 2 value, but only 1 will be recognized as its own, and the other value will be used for displaying in text fields.

Answer 1

I'm still not sure exactly what you mean, but does this give the expected output?

Jsfiddle: https://jsfiddle.net/x9n1b5oh/2/

$("#mydropdown").change(function () {
    let value = this.value.replace(/[{}]/, '').split(':');
    $("#myreceiver").val(value[0]);
    console.log(value[1]) // do something with the second value
});